Webpack4 - 模块解析失败：意外字符'@'答案

【问题标题】：Webpack4 - Module parse failed: Unexpected character '@'Webpack4 - 模块解析失败：意外字符'@'
【发布时间】：2020-03-09 20:28:03
【问题描述】：

我刚开始使用 webpack，遇到了一个问题，我认为 css-loader 无法解析我的@import？

Webpack 配置：

const config = {
    entry: {
        main: __dirname + '/js/index.jsx'
    },
    devtool: 'eval-source-map',
    plugins: [
        new MiniCssExtractPlugin({
            filename: isDevelopment ? '[name].css' : '[name].[hash].css',
            chunkFilename: isDevelopment ? '[id].css' : '[id].[hash].css'
        })
    ],
    module: {
        rules: [
            {
                test: /\.jsx?/,
                loader: 'babel-loader',
                exclude: /node_modules/,
            },
            {
                test: /\.s(a|c)ss$/m,
                include: [
                    resolve(__dirname, '/sass'),
                ],
                use: [
                    {
                        loader: isDevelopment ? 'style-loader' : MiniCssExtractPlugin.loader,
                    },
                    {
                        loader: 'css-loader',
                    },
                    {
                        loader: 'sass-loader',
                        options: {
                            sourceMap: isDevelopment,
                            implementation: require('sass')
                        }
                    }
                ]
            }
        ]
    }
}

文件夹结构：

application
|
|___static
|     |____dist
      |____js
      |     |____react components in here
      |____sass
      |      |____abstracts
      |      |        |____variables.scss
      |      |____pages
      |      |      |_____app.scss
      |      |____main.scss   
      |____package-lock.json
      |____package.json
      |____webpack.config.js

main.scss的内容在错误中。

错误：

ERROR in ./sass/main.scss 1:0
Module parse failed: Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> @import 'abstracts/variables';
| @import 'pages/app';
| 
 @ ./js/components/App.jsx 20:0-37 35:19-25
 @ ./js/routes.js
 @ ./js/index.jsx

任何指针都会很棒！谢谢！

亚历克斯

【问题讨论】：

标签： webpack webpack-4

【解决方案1】：

问题是

                include: [
                    resolve(__dirname, '/sass'),
                ],

已删除并按预期工作。

【讨论】：