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

Include CSS (Sass) from multiple modules

本文关键字：CSS Sass 模块 包括      更新时间：2023-09-26

我正在整理一个将在npm上可用的repo。repo由多个模块组成，类似于react-传单和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，并且更愿意坚持使用管道。

UPDATE:我发现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中。

这已经实现了，但不是理想的，原因有两个:

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

这是一个Webpack设置，它正好满足了你的需要:

  • 只包含导入的模块CSS (ModuleThree不是)。
  • 不需要更新一些gulpfile.js或*.config.js，每个模块require都有自己的样式表，就像任何其他依赖一样。

Bonus: module2展示了如何延迟加载CSS，还包含了一个背景图像，它将像任何依赖项一样包含在内。

注意:我没有使用ES2015语法，但如果你愿意，你可以使用babel-loader

这部分取决于您自己的开发管道。在构建应用程序时，你可以将所有的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/'));

相关文章：