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

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

1、安装less依赖

1	npm install less less-loader --save

2、安装style-resources

1	npm install @nuxtjs/style-resources --save

如果是yarn如下

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

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

1
2
3
4
5
6
7
8
9
10

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

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

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

例如：

vars.less

1	@theme-color: #c91c1c;

index.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

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

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

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

css.css

1
2
3

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

其他

scss如下配置

1
2
3
4
5
6
7
8
9

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

来个全的：

1
2
3
4
5
6
7
8
9
10
11

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