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

Question

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

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和 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将使用 "style" glob in myNpmPackage/package.json将所有 .scss 汇总起来myNpmPackage 中的文件的模块并将它们捆绑到 ./build/modules.css 中.

这是到达那里，但不理想的原因有两个:

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

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 .