css - 收到错误 - “您可能需要适当的加载程序来处理此文件类型,当前没有配置加载程序来处理此文件”
问题描述
我是 React 的初学者,遇到了一些问题。无法在 React 应用程序中导入外部 css 文件。在导入时我收到错误消息“您可能需要适当的加载程序来处理此文件类型,目前没有配置加载程序来处理此文件”。我在 webpack 配置中添加了一个 css 加载器和样式加载器,但仍然出现此错误。
**Webpack.config.js**
var path = require('path')
var webpack = require('webpack')
var nodeExternals = require('webpack-node-externals')
var browserConfig = {
entry: './src/browser/index.js',
output: {
path: path.resolve(__dirname, 'public'), // create a public folder
// and inside this we'll create file named bundle.js which contain
// the whole app contained in one file
filename: 'bundle.js',
publicPath: '/'
},
module: {
rules: [
{ test: /\.(js)$/, use: 'babel-loader'}, // whenever webpack found
// any .js file then it will call babel-loader to convert JSX into
// vanilla js
{
test:/\.css$/,
use:['style-loader','css-loader']
}
]
},
plugins: [
new webpack.DefinePlugin({
__isBrowser__: "true" // plugin help to know whether we are in
// browser rendered page or server rendered page.
})
]
}
var serverConfig = {
entry: './src/server/index.js',
target: 'node',
externals: [nodeExternals()],
output: {
path: __dirname,
filename: 'server.js',
publicPath: '/'
},
module: {
rules: [
{ test: /\.(js)$/, use: 'babel-loader' },
{
test:/\.css$/,
use:['style-loader','css-loader']
}
]
},
plugins: [
new webpack.DefinePlugin({
__isBrowser__: "false"
})
]
}
module.exports = [browserConfig, serverConfig]
包.json
{
"name": "React-App",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev-server": "nodemon --exec babel-node src/server/server.js --ignore public/",
"dev-bundle": "webpack -w -d"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"@babel/core": "^7.10.2",
"@babel/node": "^7.10.1",
"@babel/preset-react": "^7.10.1",
"babel-loader": "^8.1.0",
"@babel/preset-env": "^7.9.6",
"express": "^4.17.1",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-router-dom": "^5.2.0",
"webpack": "^4.43.0",
"webpack-cli": "^3.3.11",
"webpack-node-externals": "^1.7.2"
},
"devDependencies": {
"babel-eslint": "^10.1.0",
"cors": "^2.8.5",
"css-loader": "^3.5.3",
"eslint": "^7.2.0",
"eslint-plugin-react": "^7.20.0",
"eslint-plugin-react-hooks": "^4.0.4",
"nodemon": "^2.0.4",
"serialize-javascript": "^3.0.0",
"style-loader": "^1.2.1"
}
}
babel.config.js
module.exports = {
presets: ['@babel/preset-env', '@babel/preset-react'],
};
主页.js
import React from 'react';
import {Link} from 'react-router-dom';
import './../styles/NavBar.css';
export default function Home () {
const myStyle = {
"margin-left":"25%",
"padding":"1px 16px",
"height":"1000px"
};
return (
<>
<ul>
<li><a class="active" href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
<div style={myStyle}>
<h2>Fixed Full-height Side Nav</h2>
</div>
</>
)
}
导航栏.css
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 25%;
background-color: #f1f1f1;
position: fixed;
height: 100%;
overflow: auto;
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
li a.active {
background-color: #4CAF50;
color: white;
}
li a:hover:not(.active) {
background-color: #555;
color: white;
}
错误
C:\React-App\src\styles\NavBar.css:1
ul {
^
SyntaxError: Unexpected token '{'
at wrapSafe (internal/modules/cjs/loader.js:1047:16)
at Module._compile (internal/modules/cjs/loader.js:1097:27)
at Module._extensions..js (internal/modules/cjs/loader.js:1153:10)
at Object.newLoader [as .js] (C:\React-App\node_modules\pirates\lib\index.js:104:7)
at Module.load (internal/modules/cjs/loader.js:977:32)
at Function.Module._load (internal/modules/cjs/loader.js:877:14)
at Module.require (internal/modules/cjs/loader.js:1019:19)
at require (internal/modules/cjs/helpers.js:77:18)
at Object.<anonymous> (C:\React-App\src\shared\/Home.js:3:1)
at Module._compile (internal/modules/cjs/loader.js:1133:30)
解决方案
好吧,您的设置看起来不错,不确定 Home.js 文件。直到现在还没有这样用过。可能是它的新写作方式。
其他虎钳尝试将文件更改为 Home.jsx 并将您的 webpack 更改为
{ test: /\.(js|jsx)$/, use: 'babel-loader' }
推荐阅读
- rust - 如何处理 Rust 中的循环闭包调用?
- django - 有什么办法可以强制 django 在退出前运行一些整理代码?
- sql-server - 如何在同一行中创建两个不同的值
- angular - 我正在将 Angular 版本从 7 更新到 8。但出现对等依赖错误
- go - 如何在 Go 中获取特定扩展名的文件数?
- excel - Excel:带有日期范围的 IF 语句以及更多
- c# - 任何 UnhandledException 都不会从 INotifyPropertyChanged 上的 ComboBox 中捕获,而 Button 会
- javascript - InvalidValueError:不是数组
- laravel - Eloquent 如何更新 deleted_at 列
- mocking - 使用 Moq 设置模拟方法时出现无效回调错误