VUE—vue3使用less 颜色变量_vue3 less 使用vue变量

1、安装依赖

vue add style-resources-loader vue-cli-plugin-style-resources-loader -D
1

2、vue.config.js引入

pluginOptions: {
    'style-resources-loader': {
        preProcessor: 'less',
        patterns: [
            path.resolve(__dirname, './src/style/theme.less' // 注意路径
        ]
    }
}
1
2
3
4
5
6
7
8

3、根目录下新建style文件

4、less文件里使用变量存储颜色

background: @primary-color;
1

5、页面中使用

<style lang="less" scoped>
	button {
	  color: @primary-color;
	  background: none;
	  font-size: @text-font;
	}
</script>
1
2
3
4
5
6
7