【Vue | 补洞 | 14】使用less全局变量

原创已于 2022-03-23 12:45:21 修改

· 1k 阅读

0 ·

版权

文章标签：

#javascript #前端 #vue #less #css

于 2022-03-23 06:30:00 首次发布

前端同时被 3 个专栏收录

71 篇文章

订阅专栏

Vue补洞

22 篇文章

订阅专栏

CSS

11 篇文章

订阅专栏

本文介绍如何在Vue项目中通过style-resources-loader插件引入全局less文件，让所有组件都能访问并使用定义的样式变量，提升代码复用和一致性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实现在 Vue 中通过全局样式文件，在任意组件均可调用样式变量，统一样式风格！

1. 背景

在 Vue 中通过 less 或者 scss 可以声明 全局变量，统一整体样式风格。

但是！若直接在 main.js 中引入 global.less，在 .vue 文件所写的组件中是无法使用该全局样式的。

因此本文以 less 为例，实现在 Vue2 中引入全局 less 文件供所有组件使用。

2. 做法

1）安装插件

npm install style-resources-loader

2）新建全局样式文件，路径为 src/assets/global.less

/* global.less */
@primary-color: #6c9eff;

3）在项目根目录（即与package.json同级目录）的 vue.config.js 中编写如下代码（若没该文件，则新建一个）

// vue.config.js
const path = require('path')
module.exports = {
    chainWebpack: config=> {
        config.module.rule('less').oneOf('vue').use('style-resource')
        .loader('style-resources-loader')
        .options({
            patterns: [
                path.resolve(__dirname, './src/assets/global.less'),
            ],
        })
    },
    css: {
        loaderOptions: {
            less: {
                javascriptEnabled: true
            }
        }
    }
}

4）此时即可在任意的组件中使用全局样式！

// helloWorld.vue
<template>
	<h1>HelloWorld</h1>
</template>

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