Question

我正在整理一个将在npm上提供的回购。 repo由多个模块组成，类似于react-leaflet和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和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"中的myNpmPackage/package.json glob来汇总.scss模块中的所有myNpmPackage个文件，并将它们捆绑到{{1} }}

这是实现目标，但由于两个原因并不理想：

每个模块的CSS文件都包含在使用者应用程序构建中，即使并非所有模块都包含在内;

此策略要求使用者应用程序开发人员将代码添加到他们的./build/modules.css而不是“正常工作”。

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）

2 个答案: