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

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>