我已经知道这个问题已经被问过很多次了。我查看了所有问题,但没有用。我将 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 仅适用于导航栏。
这是我的网页包:
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 中有些东西让我无法理解,我需要一些帮助。
谢谢你!