使用webpack导入目录中的所有sass文件

我目前正在尝试使用Webpack捆绑所有文件，并且我不知道如何处理多个文件夹和.scss文件时如何继续。使用webpack导入目录中的所有sass文件

我用咕噜完成这些任务，这是我的文件夹结构的例子：

functions 
    - _mixin.scss 
    - _function.scss 
    - [...] 
variables 
    - _colors.scss 
    - _typo.scss 
    - [...] 
ui 
    - _button.scss 
    - _grid.scss 
    - [...] 
view 
    - _home.scss 
    - _about.scss 
    - [...]

随着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自动执行此任务？

来源

2017-04-07 celsomtrindade

，文件名匹配由用户需求（即通过装载机）需要产生的CSS。如果你想将scss编译为一个文件，而不需要将它们作为组件导入到webpack中，那么删除'@import scss'语句并通过npm脚本或其他方式（grunt/node-sass etc）分别编译它们。 –

@DenisTsoi我是只需导入编译的CSS。我想说的是，例如，如果我在文件夹“ui”中创建一个新文件，我需要手动添加@import'ui/newfile';在main.scss文件中。我曾经使用'grunt sass-compile-imports'自动执行它。 – celsomtrindade

嗯 - 我想这是一个非常见的做法（因为它假设你的工作流程确保样式绑定到组件js/html依赖关系） - 因此像这样自动添加所有的partial可能不被普遍支持。没有什么能够阻止你说出来，使用grunt自动编译scss，并要求'main.scss'到条目文件中。 –

你可以使用插件import-glob-loadergithub/npm

它支持

@import "foo/**/*";

如果要导入的文件SCSS到组件JS其输出到

@import "foo/1.scss"; 
@import "foo/bar/2.scss"; 
@import "foo/bar/3.scss";

来源

2017-04-08 14:58:37

这是[不能在webpack 3+中工作]（https://github.com/Aintaer/import-glob-loader/issues/10） –

让我稍后再来看看 - 没有检查更新后的webpack版本 –

使用webpack导入目录中的所有sass文件

回答

相关问题