我正在整理一个将在 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
中.
这是到达那里,但不理想的原因有两个:
- 每个模块的 CSS 文件都包含在消费者应用程序构建中,即使不是所有模块都包含在内;
- 此策略要求消费者应用程序开发人员将代码添加到他们的
gulpfile
而不是“只是工作”。
最佳答案
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 .
关于javascript - 包含来自多个模块的 CSS (Sass),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32853512/