Webpack 4 Module parse failed: Unexpected character '@' (1:0)

问题:

I get this error when i try to run npm run dev to compile my scss to css. I know that issue is related to @import

ERROR in ./src/scss/main.scss Module parse failed: Unexpected character '@' (1:0) You may need an appropriate loader to handle this file type. | @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"     } } 

回答1:

I think your problem might be exactly the same as mine posted here: Webpack 4 - Module parse failed: Unexpected character '@'

In your scripts you are doing the same as me, missing out the --config webpack.dev.js

"build": "webpack --mode production", "dev": "webpack --mode development" 

It should look like this instead:

"build": "webpack --config webpack.dev.js", "dev": ".webpack --config webpack.prod.js", 

And in your Webpack config files, you should state the mode there like so:

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

文章来源: Webpack 4 Module parse failed: Unexpected character '@' (1:0)