我收到同样的错误两次,然后我尝试Webpack Module parse failed with bootstrap css和一个错误消失。但我不知道如何解决这个问题。
Bellow是我命令行中的一个转储:
yarn start
yarn run v1.22.15
webpack --progress --watch
assets by status 4.74 MiB [cached] 2 assets
orphan modules 7.78 MiB [orphan] 1725 modules
runtime modules 1.06 KiB 6 modules
built modules 10.9 MiB [built]
modules by path ./node_modules/ 3.63 MiB
javascript modules 3.55 MiB 918 modules
json modules 86.7 KiB
./node_modules/iconv-lite/encodings/tables/shiftjis.json 8.78 KiB [built] [code generated]
./node_modules/iconv-lite/encodings/tables/eucjp.json 15.1 KiB [built] [code generated]
./node_modules/iconv-lite/encodings/tables/cp936.json 20.1 KiB [built] [code generated]
./node_modules/iconv-lite/encodings/tables/gbk-added.json 926 bytes [built] [code generated]
./node_modules/iconv-lite/encodings/tables/gb18030-ranges.json 2.17 KiB [built] [code generated]
./node_modules/iconv-lite/encodings/tables/cp949.json 16.7 KiB [built] [code generated]
./node_modules/iconv-lite/encodings/tables/cp950.json 15.2 KiB [built] [code generated]
./node_modules/iconv-lite/encodings/tables/big5-added.json 7.85 KiB [built] [code generated]
+ 14 modules
ERROR in yote.scss 6:0
Module parse failed: Unexpected character '@' (6:0)
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
| * Third-Party
| */
> @import 'node_modules/react-datepicker/dist/react-datepicker';
| @import 'node_modules/react-vis/dist/style';
|
@ ./app.js.jsx 15:0-21
webpack 5.75.0 compiled with 1 error in 30372 ms
这是我的webpack.config.js文件
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
let path = require('path');
let webpack = require('webpack');
const config = {
devtool: 'cheap-module-source-map'
, entry: ['./app.js.jsx']
, output: {
path: path.join(__dirname, '../server/public/js')
, filename: 'react-bundle.js'
},
// target: 'node',
mode: 'production'
, module: {
rules: [
{
test: /\.(sass|css)$/,
use: [MiniCssExtractPlugin.loader, 'css-loader!sass-loader'],
exclude: [/node_modules/],
}
,
{
test: /\.(png|jpg|gif)$/i,
use: [
{
loader: 'url-loader',
options: {
limit: 8192,
},
},
],
},
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: {
presets: ['@babel/preset-react']
}
}
}
]
},
optimization: {
minimize: true, // if true also works in dev else only in prod
moduleIds: 'named',
minimizer: [
// For webpack@5 you can use the `...` syntax to extend existing minimizers (i.e. `terser-webpack-plugin`), uncomment the next line
// `...`,
new CssMinimizerPlugin(),
],
},
resolve: {
fallback: {
"util": false,
"stream": false,
}
},
plugins: [
new webpack.DefinePlugin({
'process.env': {
'NODE_ENV': JSON.stringify('production')
}
})
, new MiniCssExtractPlugin({
文件名:'../css/yote.css' }),new HtmlWebpackPlugin
()] }
module.exports = config;
1条答案
按热度按时间6pp0gazn1#
正如错误消息所示,解析“yote.scss”文件时存在问题。
似乎没有配置加载程序来处理.scss文件,这是导致错误的原因。
你可以添加一个加载程序到你的webpack配置,它可以处理.scss文件。2最常见的.scss文件加载程序是“sass-loader”,它可以通过npm安装。3一旦安装,你可以添加加载程序到你的webpack配置来处理.scss文件。
下面是一个如何在webpack.config.js文件中配置sass加载器的示例: