我目前正在尝试使用 Webpack 捆绑我的所有文件,但我不知道在处理多个文件夹和.scss
files.
我曾经使用 grunt 来完成这些任务,这是我的文件夹结构的示例:
functions
- _mixin.scss
- _function.scss
- [...]
variables
- _colors.scss
- _typo.scss
- [...]
ui
- _button.scss
- _grid.scss
- [...]
view
- _home.scss
- _about.scss
- [...]
With Grunt
我将运行一个任务来生成一个名为的文件main.scss
包含所有的@import
, 例如:
@import 'function/_mixin.scss';
@import 'function/_function.scss';
@import 'variables/_colors.scss';
@import 'variables/_typo.scss';
[...]
目前我正在指定我的导入.js
文件(与extract-text-webpack-plugin
)来定义main.scss
文件,但每个新import
,或旧的,需要手动添加/删除。有没有办法自动执行此任务WebPack
?
当 webpack 3 或 4 时
Use 节点 sass-glob-导入器 https://github.com/maoberlehner/node-sass-magic-importer/tree/master/packages/node-sass-glob-importer
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const globImporter = require('node-sass-glob-importer');
...
test: /\.(scss|sass)$/,
use: [
MiniCssExtractPlugin.loader,
"css-loader",
{
loader: "sass-loader",
options: {
sassOptions: {
importer: globImporter()
}
}
}
]
用这个方法。
// Import all files inside the `scss` directory and subdirectories.
@import 'scss/**/*.scss';
@import 'scss/component-*';
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)