从Webpack构建CSS文件时为什么会发生错误？

Question

用于构建scss和sass文件的webpack配置不大。

const path = require('path');
const extractText = require('extract-text-webpack-plugin');

module.exports = (env = {}, argv) => {

    const isProduction = argv.mode === 'production';

    const basePathCss = './web/css';


    const config = {
        entry: {
            ucp: `${basePathCss}/scss/ucp/style.scss`,
            landings: `${basePathCss}/scss/landings/style.scss`,
            payments: `${basePathCss}/scss/payments/style.scss`,
            acp: `${basePathCss}/scss/acp/style.scss`,
            blog: `${basePathCss}/scss/blog/style.scss`,
            bcp: `${basePathCss}/scss/bcp/style.scss`,
        },
        output: {
            path: path.resolve(__dirname, basePathCss),
            filename: '[name]/style.min.css',
        },
        module: {
            rules: [
                {
                    test: /\.(s[ac]ss)$/,
                    use: extractText.extract({

                        use: [
                            {
                                loader: 'css-loader',
                                options: {
                                    sourceMap: ! isProduction
                                }
                            },
                            {
                                loader: 'postcss-loader',
                                options: {
                                    sourceMap: ! isProduction,
                                    plugins: (() => {
                                        return isProduction ? [
                                            require('autoprefixer')({
                                                browsers: ['last 2 versions']
                                            }),
                                            require('cssnano')({
                                                discardComments: {
                                                    removeAll: true
                                                }
                                            })
                                        ] : []
                                    })()
                                }
                            },
                            {
                                loader: 'sass-loader',
                                options: {
                                    outputStyle: 'expanded',
                                    sourceMap: ! isProduction
                                }
                            }
                        ]
                    }),
                    include: [path.join(__dirname, '', 'node_modules')],
                },
            ]

        },
        plugins: [
            new extractText({
                filename: '[name]/style.min.css'
            })
        ],
        devtool: (() => {
            return isProduction
                ? '' // 'hidden-source-map'
                : 'source-map'
        })(),

    };

    return config
};

构建时会发生此类错误。

  ./web/css/scss/landings/style.scss中的

ERROR 2：0模块解析失败：   意外字符'@'（2：0）您可能需要适当的加载程序   处理此文件类型。 | //变量，混入

     

    

@import“变量”； | @import“ mixins”; |

  

这是依赖性列表。

 "dependencies": {
    "autoprefixer": "^9.5.1",
    "css-loader": "^2.1.1",
    "cssnano": "^4.1.10",
    "extract-text-webpack-plugin": "^4.0.0-beta.0",
    "file-loader": "^3.0.1",
    "node-sass": "^4.11.0",
    "postcss-loader": "^3.0.0",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.1",
    "webpack": "^4.30.0",
    "webpack-cli": "^3.3.0"
  }

我做错了什么以及如何解决此问题？