bezierEasingMixin(); Inline JavaScript is not enabled. Is it set in your options

3,628 阅读1分钟

在react使用AntDesign组件库时,引入样式文件。
本来是:import 'antd/dist/antd.css'; 一切正常。
修改为:import 'antd/dist/antd.less'; 后报错,内容如下:

image.png

网上一查才知道,\

less升级到3.xwebpack 升级到4.x的时候,按需加载就会出现错误 了。

这个错误的核心就是Inline JavaScript is not enabled. Is it set in your options,找到错误就好办了,两种解决方案,

  1. 降低 less 版本为2.X;
  2. 修改 webpack 配置中 module.rules数组中,对应的less-loader的配置。

第一种就不说了,直接说第二种,找到webpack.config.js文件

image.png
找到我们之前配置less的代码

image.png
在这个配置前面(一定要是前面,后面就不起作用了)加上如下代码:

{
  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 版本来修改不同的配置。\

最后重启项目就可以了。