"next": "^11.0.1"+"antd":"4.23.0"报错:./node_modules/antd/es/badge/style/index.less Global CSS cannot be imported from within node_modules.
时间: 2023-12-13 10:05:48 浏览: 192
openjdk-11.0.1_linux-x64_bin.tar.gz
这个错误是因为你尝试从 `node_modules` 中引入全局 CSS 文件,而 Webpack 默认不允许这样做。你可以通过在 Webpack 配置文件中添加一些选项来解决这个问题。
在 `webpack.config.js` 中,添加以下代码:
```javascript
module.exports = {
// ...
module: {
rules: [
// ...
{
test: /\.less$/,
use: [
// ...
{
loader: 'less-loader',
options: {
lessOptions: {
javascriptEnabled: true,
},
},
},
],
},
],
},
// ...
};
```
这段代码将启用 JavaScript 解析 Less 文件,并将其转换为 CSS 文件。由于这是全局 CSS 文件,因此需要将 `less-loader` 改为 `style-loader` 和 `css-loader`。
如果你在使用 `create-react-app`,则可以通过在 `package.json` 中添加以下内容来解决这个问题:
```json
{
"name": "my-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"antd": "^4.23.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "4.0.3"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"style": {
"modules": true,
"sourceMap": true,
"importLoaders": 2,
"localIdentName": "[name]__[local]___[hash:base64:5]"
}
}
```
这将启用 CSS modules,并为它们生成局部类名。
阅读全文