Webpack не может обрабатывать мои файлы SCSS, хотя у меня есть правильные загрузчики - PullRequest
Новая
       23

Webpack не может обрабатывать мои файлы SCSS, хотя у меня есть правильные загрузчики

0 голосов
/ 10 ноября 2019

Кажется, у меня проблема с Webpack, который не может скомпилировать мои файлы SCSS. У меня есть файл package.json и webpack.config.js, сгенерированный с использованием пакета webpack-cli init.

Ниже приведена ошибка веб-пакета, которую я получаю при попытке скомпилировать при импорте моего .scss файла в мой .js: 

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 файлы :(

1 Ответ

1 голос
/ 10 ноября 2019

Я думаю, вы можете удалить одну из фигурных скобок в тесте на scss. Хотя вы описали, как обрабатывать файлы scss. Описание не находится непосредственно в массиве правил, как вы обрабатывали файлы .jsx / .js. Я надеюсь, что это помогает

...