“您可能需要适当的加载程序来处理此文件类型,当前没有配置任何加载程序来处理此文件”

Question

我正在尝试编译我的React项目，但是这些错误突然出现：

终端输出：

| // ! Styles for Info.js
> .wrapper {
|     display: flex;
|     flex-direction: column;
 @ ./src/Components/Info.js 2:0-21
 @ ./src/Components/App.js 30:0-26 48:465-469
 @ ./src/index.js 7:0-38 8:50-53

| /*  Roboto */
> @import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;1,300&display=swap');
|
| * {
 @ ./src/Components/App.js 26:0-27
 @ ./src/index.js 7:0-38 8:50-53

const HtmlWebpackPlugin = require("html-webpack-plugin");
const path = require("path");
const isDevelopment = process.env.NODE_ENV === 'development'
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

module.exports = {
  entry: "./src/index.js",
  output: {
    filename: "bundle.[hash].js",
    path: path.resolve(__dirname, "dist"),
  },
  mode: 'development',
  plugins: [
    new HtmlWebpackPlugin({
      template: "./src/index.html",
    }),
    new MiniCssExtractPlugin({
            filename: isDevelopment ? '[name].css' : '[name].[hash].css',
            chunkFilename: isDevelopment ? '[id].css' : '[id].[hash].css'
          })
  ],
  resolve: {
    modules: [__dirname, "src", "node_modules"],
    extensions: ["*", ".js", ".jsx", ".tsx", ".ts", ".scss"],
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loader: require.resolve("babel-loader"),
      },
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.png|svg|jpg|gif$/,
        use: ["file-loader"],
      },
      {
        test: /\.(woff|woff2|eot|ttf|svg)$/,
        exclude: /node_modules/,
        loader: 'file-loader',
        options: {
          limit: 1024,
          name: '[name].[ext]',
          publicPath: 'dist/assets/',
          outputPath: 'dist/assets/'
        }
      },
    ],
  },
};

{
  "name": "finally",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack serve --hot --open",
    "build": "webpack --config webpack.config.js --mode production"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@babel/core": "^7.14.3",
    "@babel/preset-env": "^7.14.2",
    "@babel/preset-react": "^7.13.13",
    "babel-loader": "^8.2.2",
    "html-webpack-plugin": "^5.3.1",
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  },
  "devDependencies": {
    "css-loader": "^5.2.5",
    "file-loader": "^6.2.0",
    "mini-css-extract-plugin": "^1.6.0",
    "node-sass": "^6.0.0",
    "sass": "^1.34.0",
    "sass-loader": "^11.1.1",
    "style-loader": "^2.0.0",
    "webpack": "^5.37.1",
    "webpack-cli": "^4.7.0",
    "webpack-dev-server": "^3.11.2"
  }
}

i ｢wds｣: Project is running at http://localhost:8080/
i ｢wds｣: webpack output is served from /
i ｢wds｣: Content not from webpack is served from D:\Web-Development\ScandiWeb\finally
i ｢wdm｣: wait until bundle finished: /
(node:10768) [DEP_WEBPACK_TEMPLATE_PATH_PLUGIN_REPLACE_PATH_VARIABLES_HASH] DeprecationWarning: [hash] is now [fullhash] (also consider using [chunkhash] or [contenthash], see documentation for details)
(Use `node --trace-deprecation ...` to show where the warning was created)
× ｢wdm｣: assets by path *.png 28.9 KiB
  asset 7fc5201146bcbca270274ca8064944e8.png 16.5 KiB [emitted] [immutable] [from: src/Components/Images/left-arrow.png] (auxiliary name: main)
  asset 6ab976a0f3ae89bc5c8a10262caeeb84.png 12.4 KiB [emitted] [immutable] [from: src/Components/Images/right-arrow.png] (auxiliary name: main)
asset bundle.d8670388d44e7af900a1.js 1.42 MiB [emitted] [immutable] (name: main)
asset index.html 458 bytes [emitted]
runtime modules 29.6 KiB 15 modules
modules by path ./node_modules/ 1.29 MiB 34 modules
modules by path ./src/ 18.2 KiB
  modules by path ./src/Components/ 16.3 KiB
    modules by path ./src/Components/*.js 13 KiB 4 modules
    modules with errors 3.08 KiB [errors] 2 modules
    modules by path ./src/Components/Images/*.png 160 bytes 2 modules
  modules by path ./src/*.css 1.61 KiB
    ./src/index.css 1.32 KiB [built] [code generated]
    ./node_modules/css-loader/dist/cjs.js!./src/index.css 298 bytes [built] [code generated]
  ./src/index.js 315 bytes [built] [code generated]

ERROR in ./src/Components/Info.scss 2:0
Module parse failed: Unexpected token (2: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
| // ! Styles for Info.js
> .wrapper {
|     display: flex;
|     flex-direction: column;
 @ ./src/Components/Info.js 2:0-21
 @ ./src/Components/App.js 30:0-26 48:465-469
 @ ./src/index.js 7:0-38 8:50-53

ERROR in ./src/Components/main-style.scss 2:0
Module parse failed: Unexpected character '@' (2: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
| /*  Roboto */
> @import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;1,300&display=swap');
|
| * {
 @ ./src/Components/App.js 26:0-27
 @ ./src/index.js 7:0-38 8:50-53

webpack 5.37.1 compiled with 2 errors in 8467 ms
i ｢wdm｣: Failed to compile.

有人知道为什么会这样吗？

Answer 1

您需要在规则中添加sass加载程序：

rules: [
    {
        test: /\.scss$/,
        use: [
            "style-loader", // 3. Inject styles into DOM
            "css-loader", // 2. Turns css into commonjs
            "sass-loader", // 1. Turns sass into css
        ],
    },
];