如何在手动创建的 React 应用中使用谷歌字体？

如何解决如何在手动创建的 React 应用中使用谷歌字体？

我手动创建了 React 应用程序（不是 create-react-app），例如 index.js、App.js、index.css、components folder 等，因为我使用的是 React app 作为 Django 项目中的一个单独的应用程序。 为了使用谷歌字体，我遵循了this answer。 但是当我在 @import url('https://fonts.googleapis.com/css?family=Josefin+Sans') 中写入 index.css 时，它给了我这个错误。

ERROR in ./src/index.css 1:0
Module parse failed: Unexpected character '@' (1: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
> @import url('https://fonts.googleapis.com/css?family=Josefin+Sans');
| 
 @ ./src/index.js 4:0-21

webpack 5.15.0 compiled with 1 error in 999 ms

我认为此错误与 webpack.config.js 相关，似乎我需要在与 css-loader、file-loader 或其他内容相关的模块部分中添加一些规则，但我不是确定怎么写。 这只是我的想法，我不知道为什么会这样。

webpack.config.js

const path = require("path");
const webpack = require("webpack");

module.exports = {
  entry: "./src/index.js",output: {
    path: path.resolve(__dirname,"./static/frontend"),filename: "[name].js",},module: {
    rules: [
      {
        test: /\.js$/,exclude: /node_modules/,use: {
          loader: "babel-loader"
        }
      }
    ]
  },optimization: {
    minimize: true,plugins: [
    new webpack.DefinePlugin({
      "process.env" : {
        NODE_ENV: JSON.stringify("production"),}
    })
  ]
};

如何解决这个问题？ （当我尝试使用 react-toastify 时也发生了这个问题。所以我删除了它并使用了另一个替代包。）如何在非基于 create-react-app 的项目中使用字体？