即使我有正确的加载器，Webpack 也无法处理我的 SCSS 文件答案

【问题标题】：Webpack can't handle my SCSS files even though I have the correct loaders即使我有正确的加载器，Webpack 也无法处理我的 SCSS 文件
【发布时间】：2019-11-10 18:58:57
【问题描述】：

Webpack 无法编译我的 SCSS 文件似乎存在问题。我有一个package.json 文件和webpack.config.js 文件，这是使用webpack-cli init 包生成的。

以下是将我的.scss 文件导入我的.js 时尝试编译时遇到的 webpack 错误：

ERROR in ./src/scss/styles.scss 2:5
Module parse failed: Unexpected token (2:5)
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
| $green: green;
> body {
|     background-color: $green;
| }
 @ ./src/js/index.js 2:0-29

下面是我使用webpack-cli init 命令生成的webpack.config.js 文件。我必须将 scss 加载程序的内容添加到 module.rule，但我确信它已正确完成。

const path = require('path');
const webpack = require('webpack');

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    mode: 'development',
    entry: './src/js/index.js',

    output: {
        filename: '[name].[chunkhash].js',
        path: path.resolve(__dirname, 'html')
    },

    plugins: [new webpack.ProgressPlugin(), new HtmlWebpackPlugin()],

    module: {
        rules: [
            {
                test: /.(js|jsx)$/,
                include: [path.resolve(__dirname, 'src/js')],
                loader: 'babel-loader',

                options: {
                    plugins: ['syntax-dynamic-import'],

                    presets: [
                        [
                            '@babel/preset-env',
                            {
                                modules: false
                            }
                        ]
                    ]
                }
            },
            {
                {
                    test: /\.scss$/,
                    use: ['style-loader', 'css-loader', 'sass-loader']
                }
            }
        ]
    },

    devServer: {
        open: true
    }
};

下面是由webpack-cli init 命令生成的package.json 文件

{
  "name": "test-webpack",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "devDependencies": {
    "@babel/core": "^7.7.2",
    "@babel/preset-env": "^7.7.1",
    "@webpack-cli/init": "^0.2.2",
    "babel-loader": "^8.0.6",
    "babel-plugin-syntax-dynamic-import": "^6.18.0",
    "css-loader": "^3.2.0",
    "html-webpack-plugin": "^3.2.0",
    "node-sass": "^4.13.0",
    "sass-loader": "^8.0.0",
    "style-loader": "^1.0.0",
    "webpack": "^4.41.2",
    "webpack-cli": "^3.3.10",
    "webpack-dev-server": "^3.9.0"
  },
  "description": "My webpack project",
  "scripts": {
    "build": "webpack",
    "start": "webpack-dev-server"
  }
}

我确定我已经安装了完成这项工作所需的一切，但无论我尝试什么，它都不想编译我的 .scss 文件:(

【问题讨论】：

标签： webpack webpack-dev-server webpack-4

【解决方案1】：

我认为您可能希望删除 scss 测试中的一个花括号。尽管您描述了应如何处理 scss 文件。描述不像您处理 .jsx/.js 文件那样直接位于规则数组下。我希望这会有所帮助

【讨论】：

是的，我不敢相信我错过了