nextjs+react报错:./node_modules/antd/es/badge/style/index.less Global CSS cannot be imported from within node_modules.
时间: 2023-10-04 19:08:53 浏览: 125
next-with-less:Next.js +较少CSS支持
这个错误是因为less文件中引入了全局CSS,而Next.js默认不允许从node_modules中导入全局CSS。
解决方案有两种:
1.在next.config.js中配置webpack,允许导入全局CSS。
```javascript
const withLess = require('@zeit/next-less');
module.exports = withLess({
webpack: (config, { isServer }) => {
if (isServer) {
const antStyles = /antd\/.*?\/style.*?/;
const origExternals = [...config.externals];
config.externals = [
(context, request, callback) => {
if (request.match(antStyles)) return callback();
if (typeof origExternals[0] === 'function') {
origExternals[0](context, request, callback);
} else {
callback();
}
},
...(typeof origExternals[0] === 'function' ? [] : origExternals),
];
config.module.rules.unshift({
test: antStyles,
use: 'null-loader',
});
}
return config;
},
});
```
2.将全局CSS导入到页面中。
在页面的`<Head>`标签中加入以下代码,将antd的样式文件直接引入到页面中。
```html
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/antd/3.16.2/antd.min.css" />
```
阅读全文