javascript - CSS ReactJs - 你可能需要一个合适的加载器来处理这个文件类型,目前没有配置加载器来处理这个文件
问题描述
我已经知道这个问题已经被问过很多次了。我查看了所有问题,但它不起作用。我将 typescript 转换为 javascript,一切都很顺利,直到我开始实现 css。导入我的 css 后,我收到此错误。
ERROR in ./src/components/Navbar.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
> .NavbarContainer {
| width: 100%;
| height: 100%;
@ ./src/components/Nav.jsx 15:0-22
@ ./src/components/index.js
@ ./src/app.jsx
@ ./src/index.jsx
我要导入的 CSS 仅适用于导航栏。
这是我的 webpack:
var HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');
module.exports = {
mode: 'development',
module: {
rules: [
{
test: /\.(js|jsx)$/,
loader: 'babel-loader'
},
{
test: /\.css$/,
use: [
{ loader: 'style-loader' },
{ loader: 'css-loader' },
{ loader: 'less-loader' }
]
}
]
},
resolve: {
mainFiles: ['index', 'Index'],
extensions: ['.js', '.jsx'],
alias: {
'@': path.resolve(__dirname, 'src/'),
}
},
plugins: [new HtmlWebpackPlugin({
template: './src/index.html'
})],
devServer: {
historyApiFallback: true
},
externals: {
// global app config object
config: JSON.stringify({
apiUrl: 'http://localhost:4000'
})
}
}
这是我的 package.json
{
"name": "glitcher",
"version": "1.0.0",
"license": "MIT",
"scripts": {
"build": "webpack --mode production",
"start": "webpack-dev-server --open"
},
"dependencies": {
"formik": "^2.1.4",
"history": "^4.10.1",
"prop-types": "^15.7.2",
"query-string": "^6.11.0",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-router-dom": "^5.0.0",
"rxjs": "^6.3.3",
"yup": "^0.28.1"
},
"devDependencies": {
"@babel/core": "^7.4.3",
"@babel/preset-env": "^7.4.3",
"@babel/preset-react": "^7.0.0",
"babel-loader": "^8.0.5",
"css-loader": "^3.6.0",
"html-webpack-plugin": "^3.2.0",
"less": "^3.11.0",
"less-loader": "^5.0.0",
"path": "^0.12.7",
"style-loader": "^1.1.3",
"webpack": "^4.46.0",
"webpack-cli": "^3.3.0",
"webpack-dev-server": "^3.2.1"
}
}
代码工作正常。我试图卸载所有东西并做另一个项目,但我认为错误不是来自 npm 包。webpack.config 中有些东西让我无法理解,我需要一些帮助。
谢谢!
解决方案
该less-loader
插件将 Less 文件转换为 CSS。规则应该是:
{
test: /\.less$/,
use: [
{ loader: 'style-loader' },
{ loader: 'css-loader' },
{ loader: 'less-loader' }
]
}
编译器抛出错误,因为您试图将 CSS 文件传递给 Less 加载器 - 它不知道如何处理它。如果您的项目中实际上没有任何 Less 文件,只需删除less-loader
并将属性更改test
为/\.css$/
:
{
test: /\.css$/,
use: [
{ loader: 'style-loader' },
{ loader: 'css-loader' }
]
}
否则,保留两个规则以涵盖 Less 和 CSS 文件。
推荐阅读
- java - 没有 JDBC 类型的方言映射:-155
- angular - 如何在 Angular 单元测试中设置当前路由
- javascript - 检测未知设备以提醒用户的最佳方法
- azure - Azure SDK 帮助:如何获取有关用户最后访问的服务的信息?
- firebase - 无论如何,是否可以在 Google Analytics 中查看我从 Firebase 应用程序记录的(自定义)事件?
- amazon-web-services - 应用程序负载均衡器使用 Cognito 内部 500 错误进行身份验证
- javascript - 是否可以在 instagram 应用程序之外的 instagram 浏览器中打开网址?
- excel - 如果使用复制/粘贴插入,使用宏找到的值不会被替换
- javascript - 网页更改 url 后,开发工具中的 Javascript 片段似乎无法执行
- c++ - 如何在 C++Builder 中制作具有全文搜索自动完成支持的 ComboBox?