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

Question

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 文件:(

Answer 1

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

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

Webpack can't handle my SCSS files even though I have the correct loaders

webpack

webpack-dev-server

webpack-4