nuxt项目中引用less/scss全局变量

nuxt项目中有些样式需要经常使用，并且未来有可能会改，比如主题色@theme-color，所以希望在一个地方定义后，后面直接引用变量即可。但是正常使用时，less的变量是不能跨文件使用的，下面使用@nuxtjs/style-resources来把变量注入到项目中的所有文件。

1、安装less依赖

npm install less less-loader --save

2、安装style-resources

npm install @nuxtjs/style-resources --save

如果是yarn如下

yarn add less-loader less
yarn add @nuxtjs/style-resources

3、配置nuxt.config.js，添加@nuxtjs/style-resources模块和全局变量文件

export default { 
    ...
 modules: [
    '@nuxtjs/style-resources'
  ],
  styleResources: {
    less: '@/assets/vars.less'
  }
    ...
}

less有多个，可以使用数组，即less:[xxx.less,yyy.less]

然后全项目都可以使用vars.less模块定义的变量了

例如：

vars.less

@theme-color: #c91c1c;

index.vue

<template>
  <section>index</section>
</template>

<script>
export default {
  name: 'index'
}
</script>

<style scoped lang="less">
    section{
        color: @theme-color;
    }
</style>

css.css

.theme-color{
  color: @theme-color;
}

其他

scss如下配置

export default {
  modules: ['@nuxtjs/style-resources'],
  styleResources: {
    scss: [
      '@/assets/vars1.scss',
      '@/assets/vars2.scss' 
      ]
  }
}

来个全的：

export default {
  modules: [
    '@nuxtjs/style-resources',
  ], 
  styleResources: {
   sass: [],
   scss: [],
   less: [],
   stylus: []
  }
}

使用css3的var()函数

var() 函数用于插入自定义的属性值，webkit内核浏览器很好用，但是IE15才支持。使用它可以不用安装依赖了

语法

var(custom-property-name, value)

值	描述
custom-property-name	必需。自定义属性的名称，必需以 – 开头。
value	可选。备用值，在属性不存在的时候使用。

使用:root伪类来使变量全局可用

:root{
    --theme-color: #c91c1c;
}

然后就可以使用了

.section{
    color:var(--theme-color)
}

还可以使用js动态改变它

function changeColor(color = 'blue') {
	document.documentElement.style.setProperty("--theme-color",color);
}