SCSS编译时间太长

Question

我正在建立一个新的Web项目，其中涉及很多SCSS文件。我设置了一个观察器，以便每当我更改SCSS文件时，代码都将自动重新编译，以便刷新页面并查看更改。我的问题是代码重新编译大约需要45秒，我需要查看更改。我该如何解决？

我尝试过在线查找几篇文章，但找不到解决方案。我对使用webpack相当陌生，因此我对所有插件等都不熟悉。我尝试关闭源地图，但是我确实需要这些地图，并且并没有大大加快编译时间。似乎在sass / index.scss处变慢。

index.scss

@import '../../wwwroot/lib/materialize/sass/materialize.scss';
@import "../../node_modules/@progress/kendo-theme-material/scss/all";
@import '_customProperties.scss';
@import '_mixins.scss';
@import '_projectVariables.scss';
@import 'common.scss';

webpack.config.js

const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const FixStyleOnlyEntriesPlugin = require("webpack-fix-style-only-entries");
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

const dirName = 'wwwroot/dist';

module.exports = (env, argv) => {
    return {
        mode: argv.mode === "production" ? "production" : "development",
        entry: {
            mainjs: './src/scripts/index.js',
            maincss: './src/sass/index.scss'
        },
        output: {
            filename: '[name].js',
            path: path.resolve(__dirname, dirName)
        },
        devtool: 'source-map',
        module: {
            rules: [
                {
                    test: /\.s[c|a]ss$/,
                    use:
                        [
                            'style-loader',
                            MiniCssExtractPlugin.loader,
                            'css-loader?sourceMap',
                            {
                                loader: 'postcss-loader?sourceMap',
                                options: {
                                    sourceMap: 'inline',
                                    minimize: true,
                                    config: {
                                        ctx: {
                                            env: argv.mode
                                        }
                                    }
                                }
                            },
                            { loader: 'sass-loader', options: { sourceMap: true } }
                        ]
                },
                {
                    test: /\.m?js$/,
                    exclude: /(node_modules|bower_components)/,
                    use: {
                        loader: 'babel-loader',
                        options: {
                            presets: ['@babel/preset-env']
                        }
                    }
                }
            ]
        },
        plugins: [
            new CleanWebpackPlugin(),
            new FixStyleOnlyEntriesPlugin(),
            new MiniCssExtractPlugin({
                filename: '[name].css'
            })
        ]
    };
};

postcss.config.js

module.exports = ({ options }) => {
    //const plugins = [];
    if (options.env === 'production') plugins.push(require('cssnano'));
    return {
        plugins: {
            'postcss-property-lookup': {},
            'postcss-short': {},
            autoprefixer: {}
        }
    };
};

这是构建的输出：

40% building 6/7 modules 1 active ...n\source\repos\xxx\zzz\src\sass\index.scss

You did not set any plugins, parser, or stringifier. Right now, PostCSS does nothing. Pick plugins for your case on https://www.postcss.parts/ and use them in postcss.config.js.
<w> [webpack.Progress] 32560ms building
<i> [webpack.Progress] 44ms hashing
90% chunk assets processingwebpack-fix-style-only-entries: removing js from style only module: maincss.js
<i> [webpack.Progress] 366ms after chunk asset optimization
<i> [webpack.Progress] 44ms emitting
<i> [webpack.Progress] 30ms after emitting
Hash: e558a3c9fab35e54c78c
Version: webpack 4.39.2
Time: 33064ms
Built at: 09/09/2019 11:32:48 AM
          Asset      Size   Chunks             Chunk Names
    maincss.css   770 KiB  maincss  [emitted]  maincss
maincss.css.map  1.78 MiB  maincss  [emitted]  maincss
      mainjs.js  63.8 KiB   mainjs  [emitted]  mainjs
  mainjs.js.map  72.7 KiB   mainjs  [emitted]  mainjs
Entrypoint mainjs = mainjs.js mainjs.js.map
Entrypoint maincss = maincss.css maincss.css.map
[./node_modules/mini-css-extract-plugin/dist/loader.js!./node_modules/css-loader/dist/cjs.js?sourceMap!./node_modules/postcss-loader/src/index.js?!./node_modules/sass-loader/lib/loader.js?!./src/sass/index.scss] ./node_modules/mini-css-extract-plugin/dist/loader.js!./node_modules/css-loader/dist/cjs.js?sourceMap!./node_modules/postcss-loader/src??ref--4-3!./node_modules/sass-loader/lib/loader.js??ref--4-4!./src/sass/index.scss 39 bytes {maincss} [built]
    [./src/sass/index.scss] 212ms -> factory:894ms building:32328ms = 33434ms
[./src/sass/index.scss] 590 bytes {maincss} [built]
    factory:149ms building:63ms = 212ms
[./src/scripts/common.js] 91 bytes {mainjs} [built]
    [./src/scripts/index.js] 1117ms -> factory:255ms building:69ms = 1441ms
[./src/scripts/index.js] 182 bytes {mainjs} [built]
    factory:61ms building:1056ms = 1117ms
[./src/scripts/person.js] 1.14 KiB {mainjs} [built]
    [./src/scripts/index.js] 1117ms -> factory:255ms building:69ms = 1441ms
    + 3 hidden modules
Child mini-css-extract-plugin ../../xxx\zzz\node_modules\css-loader\dist\cjs.js?sourceMap!../../xxx\zzz\node_modules\postcss-loader\src\index.js??ref--4-3!../../xxx\zzz\node_modules\sass-loader\lib\loader.js??ref--4-4!../../xxx\zzz\src\sass\index.scss:
    Entrypoint mini-css-extract-plugin = *
    [./node_modules/css-loader/dist/cjs.js?sourceMap!./node_modules/postcss-loader/src/index.js?!./node_modules/sass-loader/lib/loader.js?!./src/sass/index.scss] ./node_modules/css-loader/dist/cjs.js?sourceMap!./node_modules/postcss-loader/src??ref--4-3!./node_modules/sass-loader/lib/loader.js??ref--4-4!./src/sass/index.scss 2.59 MiB {mini-css-extract-plugin} [built]
        factory:3ms building:32184ms = 32187ms
        + 1 hidden module