javascript - Webpack无法编译sass-模块解析失败：意外字符'@'（1：0）(Webpack can't compile sass - Module parse failed: Unexpected character '@' (1:0))

Question

I'm trying to use webpack for the first time and I would like to use SASS instead of CSS but I can't resolve a problem with my sass-loader.

(我第一次尝试使用webpack，但我想使用SASS而不是CSS，但是我无法解决sass-loader的问题。)

my webpack.common.js:

(我的webpack.common.js：)

 const path = require('path'); module.exports = { entry: './src/index.js', output: { filename: 'js/main.js', path: path.resolve(__dirname, 'dist') }, module: { rules: [ { test: /\.(css|scss)$/, use: ['style-loader', 'css-loader', { loader: 'postcss-loader', options: { ident: 'postcss', plugins: [ require('autoprefixer')() ] } }, 'sass-loader'] }, { test: /\.(jpg|jpeg|gif|png)$/, use: [ { loader: 'url-loader', options: { limit: 102400, name: '[name].[ext]', outputPath: 'images' } } ] }, { test: /\.(woff(2)?|ttf|eof|svg)$/, use: [ { loader: 'file-loader', options: { name: '[name].[ext]', outputPath: 'fonts' } } ] }, { test: /\.js$/, exclude: /node_modules/, use: [ { loader: 'babel-loader', options: { presets: ['@babel/preset-env'] } } ] } ] } } 

I've already install sass-loader and node-sass package with npm and I load my webpack.common.js file in a webpack.dev.js file :

(我已经安装青菜装载机和节点青菜包NPM和我加载我webpack.common.js文件中webpack.dev.js文件：)

 const merge = require('webpack-merge'); const common = require('./webpack.common'); const path = require('path'); module.exports = merge(common, { mode: 'development', devServer: { port: 3000, contentBase: path.join(__dirname, 'dist'), watchOptions: { ignored: /node_modules/ } } }); 

Honestly I don't think the problem is caused by this file.

(老实说，我不认为问题是由该文件引起的。)

To run my app I use npm run dev .

(要运行我的应用程序，请使用npm run dev 。)

Atleast, there is my sass file (in src/styles/styles.scss):

(至少，有我的sass文件（在src / styles / styles.scss中）：)

 @import '~bootstrap/scss/bootstrap.scss'; @import '~@fortawesome/fontawesome-free/css/all.css'; body { background-color: #eee; } 

Do you know how can I resolve this problem ?

(您知道如何解决此问题吗？)

I know this question was asked a lot of time, I searched on github and stackoverflow before post but I didn't succeed to make my app work.

(我知道这个问题被问了很多次，我在发布之前在github和stackoverflow上进行了搜索，但是我没有成功使我的应用程序正常运行。)

Thank you in advance.

(先感谢您。)

  ask by Yacine Chalabi translate from so

Answer 1

等待大神答复