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

Question

我目前正在尝试使用Webpack来打包所有的文件，但是我不知道如何处理多个文件夹和.scss文件。

以前我使用grunt来执行这些任务，这是我的文件夹结构示例：

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或旧的import都需要手动添加/删除。有没有办法使用WebPack自动化这个任务？

- celsomtrindade

---

如果您将scss文件导入组件js中，则用户将按需（即通过加载器）需要所需的css。如果您想将scss编译为一个文件而不将它们作为组件导入到webpack中，则请删除“@import scss”语句，并通过npm脚本或其他方式（grunt / node-sass等）单独编译它们。 - Denis Tsoi

@DenisTsoi，我只是在导入已编译的CSS。我的意思是，例如，如果我在文件夹“ui”中创建一个新文件，我需要手动在main.scss文件中添加“@import 'ui/newfile'”;。我曾经使用“grunt sass-compile-imports”自动完成这个过程。 - celsomtrindade

https://www.npmjs.com/package/import-glob-loader！！！- 找到了 - Denis Tsoi

@DenisTsoi 很好！就是这样！你介意把它变成一个答案吗？这样我就可以接受了。但无论如何，非常感谢你的帮助！ - celsomtrindade

会做的 - 祝你好运！ - Denis Tsoi

Answer 1

当使用webpack 3或4时

使用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-*';

- junho

---

你能建议使用Webpack 4的指令吗？我看到了“未知属性'importer'”。 - Mark

我进一步挖掘并了解到，将其作为 options { sassOptions: importer: globIOmporter() } 传递可以通过选项验证，但仍无法解析任何全局导入。 - Mark

对我不起作用，webpack 4.46.0，我尝试修改此配置：gist.github.com/jez500/4f4295778e386ddbc96c2377e3415fc3 - mevsme

Answer 2

注意 - 仅适用于 webpack 2（需要更新以支持webpack 3^）

您可以使用插件 import-glob-loader github / npm 它支持带有通配符的globbing

@import "foo/**/*";

输出到

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

- Denis Tsoi

---

这在webpack 3+版本中无法工作。 - Anima-t3d

稍后让我看看这个 - 还没有检查更新的webpack版本。 - Denis Tsoi

@PossessWithin - 这个评论有效吗？ https://github.com/Aintaer/import-glob-loader/issues/10#issuecomment-414574993 - Denis Tsoi

这不是一个非常关键的功能吗？:s - html_programmer