你可能需要一个合适的加载器来处理这个文件类型,目前没有加载器被配置来处理这个文件(.css, .png, .html).



我正在将react集成到Django中,下面是我得到的错误。

ERROR in ./backend/frontend/src/App.css 1:0
Module parse failed: Unexpected token (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
> .App {
|   text-align: center;
| }
@ ./backend/frontend/src/App.js 2:0-19
@ ./backend/frontend/src/index.js 4:0-24 6:107-110

我的webpack.config.js

module.exports = {
module: {
rules: [
{
test: /.js$/,
exclude: /node_modules/,
use: "babel-loader",
},
{
test: /.scss$/,
use: ['style-loader', 'css-loader', 'sass-loader'],
},
]
}
};

这是我的包裹。json依赖性

"devDependencies": {
"@babel/core": "^7.15.5",
"@babel/preset-env": "^7.15.6",
"@babel/preset-react": "^7.14.5",
"babel-loader": "^8.2.2",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"webpack": "^5.55.0",
"webpack-cli": "^4.8.0"
}

有人能建议如何解决这个问题吗?由于

<解决方案/strong>

原来我漏掉了很多东西,以下是我所做的:

npm i react react-dom --save-dev
npm install -D style-loader css-loader sass-loader
npm install --save axios
npm install --save react-router-dom
npm install --save react-dropzone
npm install react-bootstrap@next bootstrap@5.1.1
npm i web-vitals --save-dev
npm install url-loader --save-dev
npm install file-loader --save-dev

然后根据上面的答案更新我的webpack.config.js

除非您的package.json已经在dependencies下包含它们,否则请安装缺失的加载器:

npm install -D style-loader css-loader sass-loader

在你的webpack配置中添加一个新规则来针对css文件:

module.exports = {
module: {
rules: [
{
test: /.js$/,
exclude: /node_modules/,
use: "babel-loader",
},
{
test: /.scss$/,
use: ['style-loader', 'css-loader', 'sass-loader'],
},
{
test: /.css$/,
use: ['style-loader', 'css-loader']
}
]
}
};

相关内容

  • 没有找到相关文章

最新更新