模块解析失败:"webpack"中出现意外字符"@"

eeq64g8w  于 2023-02-23  发布在  Webpack
关注(0)|答案(1)|浏览(239)

我收到同样的错误两次,然后我尝试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;
6pp0gazn

6pp0gazn1#

正如错误消息所示,解析“yote.scss”文件时存在问题。
似乎没有配置加载程序来处理.scss文件,这是导致错误的原因。
你可以添加一个加载程序到你的webpack配置,它可以处理.scss文件。2最常见的.scss文件加载程序是“sass-loader”,它可以通过npm安装。3一旦安装,你可以添加加载程序到你的webpack配置来处理.scss文件。
下面是一个如何在webpack.config.js文件中配置sass加载器的示例:

module.exports = {
  // ...other webpack configuration options 
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          'style-loader',
          'css-loader',
          'sass-loader'
        ]
      }
    ]
  }
};

相关问题