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 2（需要更新webpack 3 ^）

您可以使用插件import-glob-loader github / npm

它支持使用

进行通配

@import "foo/**/*";

输出到

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

Answer 2

使用webpack 3或4时

使用此node-sass-glob-importer github

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: {
          importer: globImporter()
        }
      }
    ]

使用这种方式。

// Import all files inside the `scss` directory and subdirectories.
@import 'scss/**/*.scss';
@import 'scss/component-*';

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

2 个答案: