如何在vue项目中使用less公共变量以及vant ui中定制主题

---

前提准备

# 安装 less 依赖
$ npm i less less-loader --save-dev

# 安装 loader 依赖
$ npm install sass-resources-loader --save-dev


# 安装 vant
# Vue 2 项目，安装  Vant 2
$ npm i vant -S

# Vue 3 项目，安装  Vant 3
$ npm i vant@next -S

这里我使用的依赖版本分别是：less@3.12.2、sass-resources-loader@2.2.4，建议指定版本号安装，否则会出现意想不到的bug。

---

less 公共变量

less 公共变量即是通过定义一个通用的变量属性，然后提供多个样式使用，并且更改时，可以起到一次更改多地变更的效果。

如：themeStyle.less 公共样式文件

在页面的直接使用定义好的变量：

---

公共变量配置

找到 utils.js 文件（在项目build文件夹中），在 exports.cssLoaders 函数中添加子方法 lessResourceLoader，具体代码如下：

// utils.js
exports.cssLoaders = function (options) {
  options = options || {}

  // 1. 添加lessResourceLoader函数
  function lessResourceLoader () {
    const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]

    loaders.push(
      cssLoader,
      'less-loader',
      {
        loader: 'sass-resources-loader',
        options: {
          resources: [path.resolve(__dirname, 'your-less-file-path.less')] // ！这里填写你的less文件相对路径
        }
      }
    )

    if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        fallback: 'vue-style-loader'
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }
  }

  // 2. 修改 return 值
  return {
    css: generateLoaders(),
    postcss: generateLoaders(),
    // less: generateLoaders(), // 原先是使用 generateLoaders子函数。
    less: lessResourceLoader(), // 原先调用的子函数替换新增 lessResourceLoader子函数。
    sass: generateLoaders('sass', { indentedSyntax: true }),
    scss: generateLoaders('sass'),
    stylus: generateLoaders('stylus'),
    styl: generateLoaders('stylus')
  }
}

---

vant ui 定制主题

vant ui 定制主题官方地址：https://vant-contrib.gitee.io/vant/#/zh-CN/theme

Vant 提供了一套默认主题，CSS 命名采用 BEM 的风格，方便使用者覆盖样式。如果你想完全替换主题色或者其他样式，可以按照本文档进行主题定制。

例如：button-component

修改对应的属性值，便可实现对全局的组件样式变更。

vant ui 内置样式变量：点此查阅

---

定制方法

1. 按需引入

// babel.config.js 
module.exports = {

  // 添加以下配置
  plugins: [
    [
      'import',
      {
        libraryName: 'vant',
        libraryDirectory: 'es',
        // 指定样式路径
        style: (name) => `${name}/style/less`,
      },
      'vant',
    ],
  ],
};

2. 修改样式变量

// 当前方式，适用于vue-cli创建的项目。
// vue.config.js
module.exports = {
  css: {
    loaderOptions: {
      less: {
        // 若 less-loader 版本小于 6.0，请移除 lessOptions 这一级，直接配置选项。
        lessOptions: {
          modifyVars: {
            // 直接覆盖变量
            'text-color': '#111',
            'border-color': '#eee',
            // 或者可以通过 less 文件覆盖（文件路径为绝对路径）
            hack: `true; @import "your-less-file-path.less";`,
          },
        },
      },
    },
  },
};

此定制方法为项目最优实现方式，如有需其他实现方式，可前往 vant ui 定制主题官方地址查阅。

---

同时配置

在完成 less公共变量和 vant ui 定制主题之后，发现两者并不能同时拥有。项目运行中，less自定义的公共变量可以获取到，但关于 vant ui 的样式变量替换覆盖无效，所以就有了第三种方式：同时配置。

实现方式很简单，只需修改 utils.js 文件，找到 lessResourceLoader 函数和 cssLoaders return 修改相关内容即可，具体代码参照如下：

// utils.js
exports.cssLoaders = function (options) {
  options = options || {}

  // 修改 - 增加形参
  function lessResourceLoader (loader, loaderOptions) {
    const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]

    if (loader) {
      // 数据处理部分 - 开始
      loaders.push({
        loader: loader + '-loader',
        options: Object.assign({}, loaderOptions, {
          sourceMap: options.sourceMap
        })
      })
      // 数据处理部分 - 结束
    }

    if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        fallback: 'vue-style-loader'
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }
  }

  return {
    css: generateLoaders(),
    postcss: generateLoaders(),
    
   	// 传递实参
    less: lessResourceLoader('less', {
      modifyVars: {
        hack: `true; @import "${path.join(__dirname, '../src/assets/style/themeStyle.less')}";`
      }
    }),
    sass: generateLoaders('sass', { indentedSyntax: true }),
    scss: generateLoaders('sass'),
    stylus: generateLoaders('stylus'),
    styl: generateLoaders('stylus')
  }
}

完成以上步骤，就可以愉快地敲代码了😁。