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

Question

我正在尝试编译我的 React 项目，但出现以下错误：

\n

终端输出：

\n

\n

./src/Components/Info.scss 2:0 中的错误 模块解析失败:\n意外的标记 (2:0) 您可能需要适当的加载程序来处理\n此文件类型，目前没有配置加载程序来处理此\n文件。请参阅https://webpack.js.org/concepts#loaders

\n

\n

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

\n

\n

./src/Components/main-style.scss 2:0 中的错误 模块解析失败:\n意外字符 \'@\' (2:0) 您可能需要适当的加载程序来\n处理此文件类型，目前没有加载程序配置为处理\n此文件。请参阅https://webpack.js.org/concepts#loaders

\n

\n

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

\n

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

\n

我的 webpack.config.js：

\n

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

\n

包.json：

\n

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

\n

这是完整的终端输出：

\n

i \xef\xbd\xa2wds\xef\xbd\xa3: Project is running at http://localhost:8080/\ni \xef\xbd\xa2wds\xef\xbd\xa3: webpack output is served from /\ni \xef\xbd\xa2wds\xef\xbd\xa3: Content not from webpack is served from D:\\Web-Development\\ScandiWeb\\finally\ni \xef\xbd\xa2wdm\xef\xbd\xa3: wait until bundle finished: /\n(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)\n(Use `node --trace-deprecation ...` to show where the warning was created)\n\xc3\x97 \xef\xbd\xa2wdm\xef\xbd\xa3: assets by path *.png 28.9 KiB\n  asset 7fc5201146bcbca270274ca8064944e8.png 16.5 KiB [emitted] [immutable] [from: src/Components/Images/left-arrow.png] (auxiliary name: main)\n  asset 6ab976a0f3ae89bc5c8a10262caeeb84.png 12.4 KiB [emitted] [immutable] [from: src/Components/Images/right-arrow.png] (auxiliary name: main)\nasset bundle.d8670388d44e7af900a1.js 1.42 MiB [emitted] [immutable] (name: main)\nasset index.html 458 bytes [emitted]\nruntime modules 29.6 KiB 15 modules\nmodules by path ./node_modules/ 1.29 MiB 34 modules\nmodules by path ./src/ 18.2 KiB\n  modules by path ./src/Components/ 16.3 KiB\n    modules by path ./src/Components/*.js 13 KiB 4 modules\n    modules with errors 3.08 KiB [errors] 2 modules\n    modules by path ./src/Components/Images/*.png 160 bytes 2 modules\n  modules by path ./src/*.css 1.61 KiB\n    ./src/index.css 1.32 KiB [built] [code generated]\n    ./node_modules/css-loader/dist/cjs.js!./src/index.css 298 bytes [built] [code generated]\n  ./src/index.js 315 bytes [built] [code generated]\n\nERROR in ./src/Components/Info.scss 2:0\nModule parse failed: Unexpected token (2:0)\nYou 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\n| // ! Styles for Info.js\n> .wrapper {\n|     display: flex;\n|     flex-direction: column;\n @ ./src/Components/Info.js 2:0-21\n @ ./src/Components/App.js 30:0-26 48:465-469\n @ ./src/index.js 7:0-38 8:50-53\n\nERROR in ./src/Components/main-style.scss 2:0\nModule parse failed: Unexpected character \'@\' (2:0)\nYou 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\n| /*  Roboto */\n> @import url(\'https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;1,300&display=swap\');\n|\n| * {\n @ ./src/Components/App.js 26:0-27\n @ ./src/index.js 7:0-38 8:50-53\n\nwebpack 5.37.1 compiled with 2 errors in 8467 ms\ni \xef\xbd\xa2wdm\xef\xbd\xa3: Failed to compile.\n

\n

有谁知道为什么会发生这种情况？

\n

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