包括来自多个模块的CSS (Sass)
我正在整理一个回购，它将在国家预防机制上提供。repo由多个模块组成，类似于反应-传单和反应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"？
我使用的是大口吞下和褐化，我更愿意继续使用这个管道。
更新：--我发现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中，而不是“只工作”。
回答 2
Stack Overflow用户
发布于 2015-10-01 12:44:14
这是Webpack的圈套，它完全满足您的需要：
奖励：ModuleTwo显示如何延迟加载CSS，还包含一个背景图像，它也将像任何依赖项一样包括在内。
Note：我没有使用ES2015语法，但如果您愿意的话，可以使用巴贝尔装载机。
Stack Overflow用户
发布于 2015-10-01 13:04:41
这在一定程度上取决于你自己的开发管道。在构建应用程序时，您可以将所有SCSS呈现为CSS。因此，假设您有一个具有所有样式的CSS文件，您可以使用gulp生态系统中的各种方法将其包含到JavaScript文件中，例如这个插件。
function addStyleString(str) {
var node = document.createElement('style');
node.innerHTML = str;
document.body.appendChild(node);
}
addStyleString('/* CSS File 1 */');在你吞咽的管道里：
var gfi = require("gulp-file-insert");
gulp.src('./sample.js')
.pipe(gfi({
"/* CSS File 1 */": "path/to/main.css"
}))
.pipe(gulp.dest('./dist/'));https://stackoverflow.com/questions/32853512
复制相似问题
腾讯云开发者
