包括来自多个模块的 CSS (Sass)
Include CSS (Sass) from multiple modules
我正在整理一个将在 npm 上可用的存储库。 repo 由多个模块组成,类似于 react-leaflet and 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 and 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
将使用 myNpmPackage/package.json
中的 "style"
glob 收集 myNpmPackage
模块中的所有 .scss
文件并将它们捆绑到 ./build/modules.css
.
这是实现目标,但并不理想,原因有二:
- 每个模块的 CSS 文件都包含在消费者应用程序构建中,即使不是所有模块都包含在内;
- 此策略要求消费者应用程序开发人员将代码添加到他们的
gulpfile
而不是 "just working"。
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。
这部分取决于您自己的开发管道。您可以在构建应用程序时将所有 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
我正在整理一个将在 npm 上可用的存储库。 repo 由多个模块组成,类似于 react-leaflet and 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 and 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
将使用 myNpmPackage/package.json
中的 "style"
glob 收集 myNpmPackage
模块中的所有 .scss
文件并将它们捆绑到 ./build/modules.css
.
这是实现目标,但并不理想,原因有二:
- 每个模块的 CSS 文件都包含在消费者应用程序构建中,即使不是所有模块都包含在内;
- 此策略要求消费者应用程序开发人员将代码添加到他们的
gulpfile
而不是 "just working"。
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。
这部分取决于您自己的开发管道。您可以在构建应用程序时将所有 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