Webpack 5 错误“未捕获的错误：模块解析失败：加载字体时出现意外字符 '@'”

如何解决Webpack 5 错误“未捕获的错误：模块解析失败：加载字体时出现意外字符 '@'”

将 sass-loader 添加到 my webpack configuration 后，使用此节点模块 @fontsource/roboto 时出现构建错误

import "@fontsource/roboto"; // this is in index.tsx

Uncaught Error: 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-cyrillic-ext-400-normal*/
> @font-face {
|   font-family: 'Roboto';
|   font-style: normal;
    at eval (index.css:1)
    at Object../node_modules/@fontsource/roboto/index.css (index.js:18)
    at __webpack_require__ (index.js:556)
    at fn (index.js:767)
    at eval (index.tsx:6)
    at Module../src/index.tsx (index.js:62)
    at __webpack_require__ (index.js:556)
    at index.js:1613
    at index.js:1617

这是我的webpack configuration

  module: {
    rules: [
      {
        test: /\.tsx?$/,use: "babel-loader",exclude: /node_modules/,},{
        test: /\.s[ac]ss$/i,use: ["style-loader","css-loader","sass-loader"],{
        test: /\.(png|svg|jpg|jpeg|gif)$/i,type: "asset/resource",{
        test: /\.(woff|woff2|eot|ttf|otf)$/i,],

如果我像这样从配置中删除 sass-loader 则构建成功（但是我不能在我的项目中使用 sass 文件）

      {
        test: /\.css$/i,"css-loader"],

Here is my repo

我做错了什么？

解决方法

我在本地使用了您的存储库，似乎您的 css 文件没有被任何加载程序覆盖。我只需添加即可按预期运行构建：

        {
          test: /\.css$/i,use: ["style-loader","css-loader","sass-loader"],},

如果你玩弄规则，你应该能够：

• 优化加载器，使 css 文件不通过 sass-loader
• 改进通用测试正则表达式，使其涵盖所有 cass/scss/css 文件。