"You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file"

Question

我正在尝试编译我的 React 项目，但弹出这些错误：

终端输出：

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

显然，我的 SASS 加载程序出了点问题，但是我不知道如何解决这个问题...

我的webpack.config.js:

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/'
        }
      },
    ],
  },
};

package.json :

{
  "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
        ],
    },
];

"You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file"

"You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file"

compiler-errors

sass

reactjs

webpack