包含来自多个模块的 CSS (Sass)

Question

我正在整理一个将在 npm 上可用的 repo。 repo 由多个模块组成，类似于react-leaflet 和react-d3。应用程序开发人员将通过require/import 将模块包含在 npm 包中，例如：

import { ModuleOne, ModuleTwo } from 'myNpmPackage`;

我需要将 CSS 与每个模块一起打包，并且 CSS 将从每个模块中的 Sass 文件编译。

给定myNpmPackage 的文件夹结构，例如：

├── src
│   ├── ModuleOne
│   │   ├── index.js
│   │   ├── style.scss
│   ├── ModuleTwo
│   │   ├── index.js
│   │   ├── style.scss
├── package.json

有什么好的发布流程可以让myNpmPackage 的消费者可以使用这些.scss 文件（编译成.css），而不要求消费者明确包含/@import/link rel="stylesheet" CSS？

我正在使用 gulp 和 browserify，并且更愿意坚持使用该管道。

---

更新：我发现 parcelify 做了我需要的一些。我将以下内容添加到myNpmPackage/package.json：

"style": "src/**/*.scss",
"transforms": [
  "sass-css-stream"
]

并将parcelify 添加到dependencies，使其与myNpmPackage 一起安装。

myNpmPackage 的消费者必须将以下内容添加到他们的gulpfile：

parcelify(b, {
    bundles: {
        style: './build/modules.css'
    }
});

parcelify 将使用myNpmPackage/package.json 中的"style" glob 将.scss 模块中的所有.scss 文件汇总到myNpmPackage 的模块中，并将它们捆绑到./build/modules.css 中。

这已经到了那里，但由于两个原因并不理想：

1. 每个模块的 CSS 文件都包含在消费者应用程序构建中，即使不是所有模块都包含在内；
2. 此策略要求消费者应用程序开发人员将代码添加到他们的gulpfile，而不是“正常工作”。

Answer 1

Here is a Webpack setup 正是您所需要的：

• the build 中仅包含导入的模块 CSS（例如，ModuleThree 不包含）。
• 无需像任何其他依赖项一样更新一些gulpfile.js 或*.config.js，每个模块require its own stylesheet(s)。

奖励：ModuleTwo 显示 how to lazy load CSS 并且还包含一个背景图像，它也将像任何依赖项一样包含在内。

注意：我没有使用 ES2015 语法，但您可以使用 babel-loader。

Answer 2

这部分取决于您自己的开发管道。您可以在构建应用程序时将所有 SCSS 渲染为 CSS。因此，假设您有一个包含所有样式的 CSS 文件，您可以使用 gulp 生态系统中的各种方法将其包含到 JavaScript 文件中，例如 this plugin。

function addStyleString(str) {
    var node = document.createElement('style');
    node.innerHTML = str;
    document.body.appendChild(node);
}

addStyleString('/* CSS File 1 */');

在你的 gulp 管道中：

var gfi = require("gulp-file-insert");

gulp.src('./sample.js')
  .pipe(gfi({
    "/* CSS File 1 */": "path/to/main.css"
  }))
  .pipe(gulp.dest('./dist/'));

参考：Inject CSS stylesheet as string using Javascript