亲测好用! 全局使用less 定义的变量 （vue）- 实现换肤等功能，解决@变量 提示undefined 问题

变量存储位置：src / style / variable.less

前言：

        在项目中， 需要换肤，或者想设有相同的css属性值时， 我们可以采用less的变量，快捷修改

        前提： 已经安装好了对应版本 的less 和less-loader

                 (建议安装固定匹配版本，要不容易出错）

"less": "^4.0.0", // 这是我的less版本
"less-loader": "^8.0.0",


安装命令：
npm i [email protected] -S
npm i [email protected] -S

第一步： 安装sass-resources-loader

npm i sass-resources-loader
或 yarn add sass-resources-loader

第二部： 修改 vue.confing.js

const path = require('path')
function resolve (dir) {
  return path.join(__dirname, dir)
}

module.exports = {
  chainWebpack: config => {
    config.resolve.alias.set('@', resolve('src'))
    const oneOfsMap = config.module.rule('less').oneOfs.store
    oneOfsMap.forEach(item => {
      item
        .use('sass-resources-loader')
        .loader('sass-resources-loader')
        .options({
          // 一个变量文件用下面这个， 我的less变量存放在 src/style/variable.less
          // 这个可根据自己的变量存放位置更改
          resources: './src/style/variable.less'

          // 多个文件
          resources: ['./src/style/vars.scss', './src/style/mixins.scss']
        })
        .end()
    })
  }
}

第三步 ： 代码使用、重启项目

定义

使用

 展示

 

嘎嘎好用 兄弟们