变量存储位置:src / style / variable.less
前言:
在项目中, 需要换肤,或者想设有相同的css属性值时, 我们可以采用less的变量,快捷修改
前提: 已经安装好了对应版本 的less 和less-loader
(建议安装固定匹配版本,要不容易出错)
"less": "^4.0.0", // 这是我的less版本
"less-loader": "^8.0.0",
安装命令:
npm i less@4.0.0 -S
npm i less-loader@8.0.0 -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()
})
}
}
第三步 : 代码使用、重启项目
定义
使用
展示
嘎嘎好用 兄弟们