Сбой разбора модуля Webpack 4: неожиданный символ '@' (1: 0)

Question

Я получаю эту ошибку, когда пытаюсь запустить npm run dev для компиляции моего scss в css.Я знаю, что проблема связана с @import

ОШИБКА в ./src/scss/main.scss Ошибка анализа модуля: неожиданный символ '@' (1: 0) Возможно, вам нужен соответствующий загрузчикобрабатывать этот тип файла.|@import "header";@ ./src/index.js 3: 0-27

src / index.js import "./scss/main.scss";

src / scss / main.sccs

@import "header";

webpack.config.js

`
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const WebpackMd5Hash = require('webpack-md5-hash');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
    entry: { main: './src/index.js' },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].[chunkhash].js'
    },
    module: {
        rules: [{
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader"
                }
            },
            {
                test: /\.scss$/,
                include: [
                    path.resolve(__dirname, 'src', 'sass')
                ],
                use: ['style-loader', MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'sass-loader']
            }
        ]
    },
    plugins: [
        new CleanWebpackPlugin('dist', {}),
        new MiniCssExtractPlugin({
            filename: 'style.[contenthash].css',
        }),


  new HtmlWebpackPlugin({
        inject: false,
        hash: true,
        template: './src/index.html',
        filename: 'index.html'
    }),
    new WebpackMd5Hash()
  ]
  };`

package.json

{
    "name": "post",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "build": "webpack --mode production",
        "dev": "webpack --mode development"
    },
    "author": "",
    "license": "ISC",
    "devDependencies": {
        "autoprefixer": "^8.2.0",
        "babel-core": "^6.26.0",
        "babel-loader": "^7.1.4",
        "babel-preset-env": "^1.6.1",
        "clean-webpack-plugin": "^0.1.19",
        "css-loader": "^0.28.11",
        "html-webpack-plugin": "^3.2.0",
        "mini-css-extract-plugin": "^0.4.0",
        "node-sass": "^4.8.3",
        "postcss-loader": "^2.1.3",
        "sass-loader": "^6.0.7",
        "style-loader": "^0.20.3",
        "webpack": "^4.4.1",
        "webpack-cli": "^2.0.13",
        "webpack-md5-hash": "0.0.6"
    }
}

Answer 1

Я исправил подобные проблемы, следуя этим ссылкам .

Я обновил rule раздел webpack.config.js следующим образом

rules: [
    {
            test: /\.css$/,
            use : [
                {
                        loader: 'style-loader',
                },
                {
                        loader: 'css-loader',
                        options: {
                                sourceMap: true,
                        }
                }
            ]
    }
]

Затем установил зависимостиследующим образом.

с использованием пряжи

yarn add style-loader --dev
yarn add css-loader --dev

с использованием npm

npm install style-loader --save-dev
npm install css-loader --save-dev