Inline JavaScript is not enabled. Is it set in your options？

一、想要做的事儿和遇到的问题：

移动端在做适配的时候，使用了vw适配方案。对于我的项目来说，设计稿的尺寸 / 3.75（如：50px / 3.75 = 13.333vw），但是每次写单位的时候，要手动在控制台计算一下。所以想要自己写一个 less 的自定义函数去做这个计算。

1. 公共的less文件编写：

// common.less
// px 转 vw
.vwMixin() {
  @functions: ~`(
      function() {this.vw = function(size) {return size / 3.75 + "vw" ;}}
    )
    () `;
}
.vwMixin();

参考链接：https://juejin.cn/post/6844903841251459080，感谢大佬。

 2. 按照webpack文档的说明，配置如下：

  less-loader的文档里，写了options里是可以配置javascriptEnabled的。

  * 如果less-loader@6.x版本的话，options要改为 lessOptions

// webpack.config.js
....
{
  test: /\.less/,
  use: ['style-loader', 'css-loader', {
    loader: 'less-loader',
    options: {
     javascriptEnabled: true
    }
  }]
},
...

3. 在 Vue 组件中使用：

<style lang="less" scoped>
@import "~@/css/common.less";

.date-container {
  margin: 4vw auto 0;
  width: 100vw;
  height: 9.6vw;
  .date-items {
    width: ~`vw(72)`;
    height: ~`vw(36)`;
  }
}
</style>

4. 重新编译.....控制台报错：Inline JavaScript is not enabled. Is it set in your options？

二、如何解决？

 既然是按照文档上写的配置没有生效，那么肯定是还有其他地方需要配置相同的内容。于是，就在webpack的配置目录下面找。于是最后定位在了 vue-loader.config.js上，代码如下：

const utils = require('./utils')
module.exports = {
  loaders: utils.cssLoaders({
    sourceMap: sourceMapEnabled,
    extract: isProduction
  }),
}

这里调用了一个utils.cssLoaders，很明显，这里是和样式有关的loader，于是又定位到了 utils.js文件中。找到了如下代码：

exports.cssLoaders = function (options) {
  // ......
  return {
    css: generateLoaders(),
    postcss: generateLoaders(),
    // 处理 less-loader 的地方在这里，于是在这里再加上 javascriptEnabled: true
    less: generateLoaders('less', { javascriptEnabled: true }),
    sass: generateLoaders('sass', { indentedSyntax: true }),
    scss: generateLoaders('sass'),
    stylus: generateLoaders('stylus'),
    styl: generateLoaders('stylus')
  }
}

最后，重新编译，大功告成！