vue-cli 自动化导入 less 变量配置

背景

vue-cli 初始化的工程， 使用了 less，less 配置主题变量文件，比如 vars.less，需要用到变量时，页面就得 import 这个变量文件，否则在开发的时候，就会报错。

<script>
</script>

<style lang="less">
@import "../assets/vars.less";
.home {
  color: @primaryColor;
}
</style>

解决办法

vue-cli 官网提供了自动化导入的说明。配置 less 自动化导入如下。

const path = require("path");

module.exports = {
  chainWebpack: config => {
    const types = ["vue-modules", "vue", "normal-modules", "normal"];
    types.forEach(type =>
      config.module
        .rule("less")
        .oneOf(type)
        .use("style-resource")
        .loader("style-resources-loader")
        .options({
          patterns: [path.resolve(__dirname, "./src/assets/vars.less")]
        })
    );
  }
};

配置后，使用的时候就不需要用手动引入 vars.less 了。

<style lang="less">
.home {
  color: @primaryColor;
}
</style>