Inline JavaScript is not enabled

背景： vue-cli@4.X + view-design@4.X + Less@3.X，计划重定义主题色。

@import '~view-design/src/styles/index.less';

@primary-color: rgba(230,50,37,1);

编译报错：“Inline JavaScript is not enabled. Is it set in your options?”

查找资料后发现，这个错误是因为 Webpack 关于 Less-loader 的配置默认值不合适引发的，所以，需要重新修改配置。

Vue-cli4 因为没有暴露 webpack.config.js 文件，需要通过自己创建的 vue.config.js 文件来添加自定义配置项的，如下。

module.exports = {
  outputDir: 'dist',  //build输出目录
  assetsDir: 'assets', //静态资源目录（js, css, img）
  devServer: {
   ...
  },
  // css相关配置
  css: {
    sourceMap: true, // 开启 CSS source maps?
    loaderOptions:{
      less:{
        javascriptEnabled: true
      }
    }
  }
}

另：有的同学降低less版本至2.7.x也可以避免这个问题。