【vue2脚手架创建项目 引入全局less】

vue引入全局less

定义一些主题颜色之类的样式，不想在每一个vue文件中引入，于是想到在main.js中全局引入，但是vue文件中依然无法使用，下面解决vue引入全局less

安装相关包

npm install less less-loader --sav-dev
npm i style-resources-loader --save
npm i vue-cli-plugin-style-resources-loader --save

vue.config.js配置

const { defineConfig } = require('@vue/cli-service')
const path = require('path');

module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave: false,
  // 添加全局less变量
  pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'less',
      patterns: [
        // 路径
        path.resolve(__dirname, './src/assets/css/theme.less'),
      ],

    },

  },

})

main.js中引入全局less地址

import '@/assets/css/theme.less'

vue文件直接使用

<style scoped lang="less">
      .activeButton {
        color: @theme-color;
      }
</style>

Tips

引入全局less后，发现使用vant官方提供的vant定制主题无法使用，vant样式覆盖无效

  // vant定制主题
    css: {
      loaderOptions: {
        less: {
          // 若 less-loader 版本小于 6.0，请移除 lessOptions 这一级，直接配置选项。
          lessOptions: {
            modifyVars: {
              // 'text-color': 'red',
              // 'tabs-default-color': '#1989fa',
              // 或者可以通过 less 文件覆盖（文件路径为绝对路径）
              hack: `true; @import "${path.join(__dirname, '.src/assets/css/myVant.less')}";`,
            },
          },
        },
      },
    },

可以直接在定义全局less变量的文件内里对vant进行主题定制

@import "~vant/lib/index.less";
// 自定义
@theme-color: #1989fa;
@bg-color: #f3f4f5;
@error-bg-color: rgb(238, 246, 124);

// vant主题定制
// van-tab
@tabs-default-color: #1989fa;