问题描述
我手动创建了 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
的项目中使用字体?
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)