vue 项目中使用Less

Vue cli 新建项目后，引入 less 的话，会报错： 报错信息中，提供一个issue，里面提供了两个种方式：

• 降低 less 的版本
• 设置 开启javascript， javascriptEnabled: true

所以，需要在 vue.config.js 中设置一下 css相关的配置，如下：

const { defineConfig } = require("@vue/cli-service");
module.exports = defineConfig({
  transpileDependencies: true,
  css: {
    loaderOptions: {
      less: {
        lessOptions: {
          javascriptEnabled: true,
        },
      },
    },
  },
});

更改完 vue.config.js 后，需要重新启动一下服务才会生效。 关于 vue.config.js 的相关配置可以参考： cli.vuejs.org/zh/config/ 在这里，需要注意两点：

• 重启服务，配置才会生效
• 注意下 javascriptEnabled 设置的位置，直接设置在less下是不生效的，需要在 less下的lessOptions设置才可以。