reactjs - 由于 sass-loader 导致模块无法构建错误

Question

运行命令npm run dev时出现以下错误。但是相同的代码在我的同事系统中运行良好。我不明白出了什么问题。

当我在 App.js 中添加一个 global.scss 文件时，只有我收到以下错误，否则组件级 scss 文件工作正常。

ERROR in ./src/client/styles/global.scss (./node_modules/css-loader/dist/cjs.js??ref--5-1!./node_modules/sass-loader/dist/cjs.js!./src/client/styles/global.scss)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Invalid CSS after "��": expected "{", was ""
        on line 1 of C:\Users\Azad\Repos\travelBookingCloud-FE\src\client\styles\global.scss
>> ��
   ^

 @ ./src/client/styles/global.scss 2:26-153 43:4-64:5 46:18-145
 @ ./src/client/client.js
i ｢wdm｣: Failed to compile.

webpack.config.js

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const Dotenv = require('dotenv-webpack');
const miniCssPlugin = new MiniCssExtractPlugin({
  filename: "[name].css",
  chunkFilename: "[id].css"
});

const htmlPlugin =  new HtmlWebpackPlugin({
  filename: "index.html",
  template: path.join(__dirname, "src", "index.html")
});

const uglifyJsPlugin = new UglifyJsPlugin({
  sourceMap: true,
  test: /\.min\.js$/i,
});

const dotEnv=new Dotenv();

module.exports = (env, argv)=> {
  const isDevelopment = argv.mode === 'development';
  return {
    optimization: {
      nodeEnv: argv.mode
    },
    entry: path.join(__dirname, "src/client", "client.js"),
    output: {
      path: path.join(__dirname, "build"),
      filename: "bundle.js",
      publicPath: '/'
    },
    mode: argv.mode,
    devtool: isDevelopment
      ? '#eval-source-map'
      : 'source-map',
    devServer: {
      stats: {
        children: false,
        maxModules: 0
      },
      port: 3000,
      historyApiFallback: true
    },
    node: {
      fs: "empty"
    },
    resolve: {
      modules: ['src/scripts', 'node_modules'],
      extensions: ['.jsx', '.js'],
      unsafeCache: true,
      alias: {
        Config: path.resolve(__dirname, 'src/config'),
        Components: path.resolve(__dirname, 'src/client/components'),
        Constants: path.resolve(__dirname, 'src/client/constants'),
        Helpers: path.resolve(__dirname, 'src/client/helpers'),
        Views: path.resolve(__dirname, 'src/client/views'),
        Widgets: path.resolve(__dirname, 'src/client/widgets'),
        App: path.resolve(__dirname, 'src')
      }
    },
    module: {
      rules: [
        {
          test: /.(js|jsx)$/,
          exclude: /node_modules/,
          use: {
            loader: "babel-loader"
          }
        },
        {
          test: /\.(sa|sc|c)ss$/,
          use: [
            isDevelopment
              ? "style-loader"
              : MiniCssExtractPlugin.loader,
            {
              loader: "css-loader",
              options: {
                importLoaders: 1
              }
            },
            "sass-loader"
          ]
        },
        {
          test: /\.(png|jpg|jp(e)g|gif|svg)$/i,
          use: [
            {
              loader: "url-loader",
              options: {
                limit: 8192
              }
            }
          ]
        },
        {
          test: /\.(ttf|eot|svg|jpg|jp(e)g|png|woff(2)?)(\?[a-z0-9=&.]+)?$/,
          use: [
            {
              loader: "file-loader",
              options: {
                name: "[path][name]-[hash:8].[ext]"
              }
            }
          ]
        }
      ]
    },
    plugins: [
      uglifyJsPlugin,htmlPlugin,miniCssPlugin,dotEnv
    ]
  };
};

包.json

 {
  "name": "travelbookingcloud-fe",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack --mode development",
    "dev": "webpack-dev-server --mode development --hot --open",
    "build": "webpack --mode production"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.10.4",
    "@babel/plugin-proposal-class-properties": "^7.10.4",
    "@babel/preset-env": "^7.10.4",
    "@babel/preset-react": "^7.10.4",
    "@date-io/date-fns": "^2.6.2",
    "@material-ui/core": "^4.11.0",
    "@material-ui/icons": "^4.9.1",
    "@material-ui/lab": "^4.0.0-alpha.56",
    "@material-ui/pickers": "^3.2.10",
    "@material-ui/utils": "^4.10.2",
    "axios": "^0.19.2",
    "babel-loader": "^8.1.0",
    "copy-webpack-plugin": "^6.0.3",
    "css-loader": "^3.6.0",
    "dotenv": "^8.2.0",
    "dotenv-webpack": "^1.8.0",
    "file-loader": "^6.0.0",
    "html-webpack-plugin": "^4.3.0",
    "mini-css-extract-plugin": "^0.9.0",
    "moment": "^2.27.0",
    "node-sass": "^4.14.1",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-router-dom": "^5.2.0",
    "sass-loader": "^8.0.2",
    "style-loader": "^1.2.1",
    "uglifyjs-webpack-plugin": "^2.2.0",
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.0"
  },
  "dependencies": {
    "react-redux": "^7.2.0",
    "redux": "^4.0.5",
    "redux-thunk": "^2.3.0"
  }
}

标签： reactjswebpacknode-sass