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

原创
前端路迹
2021-6-14 08:00
编辑于 2022-6-20 11:27

背景

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>
转载请注明出处。本文地址: https://www.qinshenxue.com/article/vue-auto-import-less-vars.html
关注 & 咨询问题