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.config.js文件，该文件是使用webpack-cli init命令生成的。我必须将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
    }
};

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

{
  "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文件那样直接在rules数组下。希望对您有帮助

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

1 个答案: