巧妙设置less、scss和js变量共享

使用场景：项目用less，引入的ui组件库使用scss（比如element-ui），通过设置共享变量可以方便调整网站的主题色调。

1. 安装 less-loader node-sass sass-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'
}

3. 在 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()
      }
    }
  }
}

4. 使用

// 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;

`

优点：更改变量只需要改一个文件，不容易改错、改少。

缺点：无法热更新，无法做主题切换。

`