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

Question

我正在整理一个将在 npm 上可用的存储库。 repo 由多个模块组成，类似于 react-leaflet and 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

什么是使 .scss 文件（编译成 .css）可供 myNpmPackage 的消费者使用的良好发布流程，而不需要消费者显式包含 /@import / link rel="stylesheet" CSS?

我正在使用 gulp and 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 收集 myNpmPackage 模块中的所有 .scss 文件并将它们捆绑到 ./build/modules.css.

这是实现目标，但并不理想，原因有二：

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

Answer 1

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

只有导入的模块 CSS 包含在 the build 中（例如 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

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

Include CSS (Sass) from multiple modules

javascript

sass

npm

gulp

browserify