实现在
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>