在react使用AntDesign组件库时,引入样式文件。
本来是:import 'antd/dist/antd.css';
一切正常。
修改为:import 'antd/dist/antd.less';
后报错,内容如下:
网上一查才知道,\
在
less
升级到3.x
,webpack
升级到4.x
的时候,按需加载就会出现错误 了。
这个错误的核心就是Inline JavaScript is not enabled. Is it set in your options
,找到错误就好办了,两种解决方案,
- 降低 less 版本为2.X;
- 修改 webpack 配置中
module.rules
数组中,对应的less-loader
的配置。
第一种就不说了,直接说第二种,找到webpack.config.js
文件
找到我们之前配置less的代码
在这个配置前面(一定要是前面,后面就不起作用了)加上如下代码:
{
test: /(\.less)$/,
use: [
'style-loader',
'css-loader',
{
loader: 'less-loader',
options: {
lessOptions: {
javascriptEnabled: true,
},
},
},
],
}
因为 webpack
4.X版本以后把use
封装了成了方法,getStyleLoaders
,如果用了这个方法,就不能在写options
了,会有冲突,所以要单独配置一下less-loader
。\
关键代码是
{
loader: 'less-loader',
options: {
lessOptions: {
javascriptEnabled: true,
},
},
},
所以根据 webpack
版本来修改不同的配置。\
最后重启项目就可以了。