使用场景：项目用
less，引入的ui组件库使用scss（比如element-ui），通过设置共享变量可以方便调整网站的主题色调。
- 安装
less-loadernode-sasssass-loader，node-sass和sass-loader需要根据node版本安装对应的版本
npm install less-loader node-sass@6.0.1 sass-loader@10.2.0 --save-dev
2.设置共享变量的文件 variable.js，如果package.json没有声明则只能是“CommonJS”规范的js文件，内容如下：
module.exports = {
'color_primary': '#14c4bc',
'color_color': '#ff6c93'
}
- 在
vue.config.js中进行配置
const variable = require('./variable.js')
const sassVars = Object.keys(variable).map(key => `\$${key.replaceAll('_', '-')}:${variable [key]};`).join('\n')
const lessVars = {}
object.keys(variable).map(key => lessVars[`@${key.replaceAll('_', '-')}`] = variable[key])
module.exports = {
css: {
loaderOptions: {
sass: {
additionalData: scssVars
},
less: {
globalVars: lessVars()
}
}
}
}
- 使用
// js
const variable = require('./variable')
const button = document.createElement('button')
button.style.color = variable.color_primary
// less
button {
color: @color-primary;
}
// scss
button {
color: $color-primary;
}
// 覆盖element-ui变量
$--color-primary: $color-primary!important;
$--color-danger: $color-error!important;
`
优点：更改变量只需要改一个文件，不容易改错、改少。
缺点：无法热更新，无法做主题切换。
`
