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

Question

我正在整理一份将在npm上发布的回购.回购包含多个模块,类似于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

这是一个完全满足您需要的Webpack 设置：

• 仅导入的模块 CSS 包含在构建中（ModuleThree例如不是）。
• 不需要像任何其他依赖项一样更新某些gulpfile.js或*.config.js每个模块require自己的样式表。

奖励：ModuleTwo 展示了如何延迟加载 CSS，并且还包含一个背景图像，该图像也将像任何依赖项一样被包含在内。

注意：我没有使用 ES2015 语法，但如果你愿意的话也可以使用babel-loader。