iView在自定义主题时报错 Inline JavaScript is not enabled. Is it set in your options?( .bezierEasingMixin())

报错信息如下：

  ERROR in ./src/my-theme/index.less (./node_modules/[email protected]@css-loader!./node_modules/[email protected]@less-loader/dist/cjs.js!./src/my-theme/index.less)
    Module build failed (from ./node_modules/[email protected]@less-loader/dist/cjs.js):
    
    
    // https://github.com/ant-design/ant-motion/issues/44
    .bezierEasingMixin();
    ^
    Inline JavaScript is not enabled. Is it set in your options?
          in C:\Users\yuansheng\Desktop\webpack-vue\node_modules\[email protected]@iview\src\styles\color\bezierEasing.less (line 110, column 0)

此问题官方没有给说明；

那么我代表官方找到了三种解决方法：

1、使用VueCli（修改less版本-简单粗暴）：

      因为作者less版本和我们最新的less版本可能不一致，所以到packjson.json中修改less版本由

修改到2.7.3

 

2、使用VueCli使用（不改less版本优雅配置）：

在Vue-cli2.x/3.x的时候 给loader加配置项是方式是这样的

{ loader: 'less-loader', options: { javascriptEnabled: true } }
在Vue-Cli3.0中需要这样写vue.config.js（没有该文件则在项目根目录增加vue.config.js）

module.exports = {
  css: {
    loaderOptions: { // 向 CSS 相关的 loader 传递选项
      less: {
        javascriptEnabled: true
      }
    }
  }
}
这个时候重启项目

npm run serve
是不是就不再报这个错误了？

 

3、使用自定义webpack使用：

在webpack.config.js下的配置项进行如下配置 =》（ 关键增加 =》options: { javascriptEnabled: true }）

module.exports = {
    mode: 'development',
    entry: {
        index: './src/main.js'
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: "[name].js"
    },
    module: {
        rules: [
            {
                test: /\.less$/,
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: ['css-loader', {
                        loader: 'less-loader',
                        options:  { javascriptEnabled: true }
                    }],
                    publicPath: '../'
                })
            },
        ]

    },

main.js配置如下：

配置完后重启项目