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

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