Setelah saya menambahkan sass-loader ke konfigurasi webpack saya, saya mendapatkan error build saat menggunakan modul node ini @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

Ini konfigurasi webpack saya

  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,
        type: "asset/resource",
      },
    ],
  },

Build berhasil jika saya menghapus sass-loader dari konfigurasi seperti ini (tetapi kemudian saya tidak dapat menggunakan file sass di proyek saya)

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

Ini repo saya

Apa yang saya lakukan salah?

2
aabuhijleh 11 Mei 2021, 20:18

1 menjawab

Jawaban Terbaik

Saya bermain dengan repo Anda secara lokal, dan sepertinya file css Anda tidak tercakup oleh pemuat apa pun. Saya menjalankan build seperti yang diharapkan hanya dengan menambahkan:

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

Jika Anda bermain-main dengan aturan, Anda harus dapat:

  • optimalkan pemuat, jadi file css tidak dijalankan melalui sass-loader
  • tingkatkan tes regex umum sehingga mencakup semua file cass/scss/css.
1
Marcin Wosinek 11 Mei 2021, 20:24