不得不说CSS预处理器(Sass/Less/Stylus)极大的方便了前端研发攻城狮编写CSS样式,提供了变量定义、可嵌套的选择器、mixins混合书写、函数定义等诸多便捷的能力。
今天呢,胡哥就以stylus在vue中的使用为例, 为大家分享css预处理器的基本使用方式,以及全局变量的定义和便捷使用方式。
三种CSS预处理器在vue中的使用原理是相同的, 希望大家能触类旁通…
在项目开发中会约定一些公共统一的样式,比例定义文字默认颜色、默认背景色,鼠标悬浮色,统一配置到一个文件中,非常利于后期的维护更新。
// assets/css/variables.styl
// 定义背景色
bgColor = #f3f3f3
// 定义导航条背景色
navBgColor = #1d1f2a
// 定义hover激活色
hoverColor = #008dff
错误方式
// main.js中引入variables.styl
import '@/assets/css/variables.styl'
// 在App.vue中的使用
<style lang="stylus">
body
background-color bgColor
</style>
如果大家按照上述的方式直接引入variables.syl文件,在组件中去使用时就会发现变量是无效的,不能被解析
正确方式
// 需要在App.vue中单独引入变量文件
<style lang="stylus">
@import './assets/css/variables.styl'
body
background-color bgColor
</style>
那么问题来了,在每一个需要使用变量的component组件中都需要单独引入variables.styl文件,不仅进行了多次重复性的操作,而且文件名称一旦发生改变,维护更新非常麻烦,非常的不人性化。
完美解决方案
借助于配置文件build/utils.js解决该问题
// 在generateLoaders方法的后面!后面!后面!(说三遍呀!)定义如下变量
const stylusOptions = {
import: [
path.join(__dirname, "../src/assets/css/variables.styl")
],
paths: [
path.join(__dirname, '../src/assets'),
path.join(__dirname, '../')
]
}
// 在紧接着的return返回值中进行配置
return {
css: generateLoaders(),
postcss: generateLoaders(),
less: generateLoaders('less'),
sass: generateLoaders('sass', { indentedSyntax: true }),
scss: generateLoaders('sass'),
stylus: generateLoaders('stylus', stylusOptions),
styl: generateLoaders('stylus', stylusOptions)
}
修改配置文件后,一定要记得重启服务 接下来直接在style中使用变量即可!!!
以上就是胡哥今天给大家分享的内容,喜欢的小伙伴记得收藏、转发、点击在看呦…
胡哥有话说,一个有技术,有情怀的胡哥!京东开放平台首席前端攻城狮。与你一起聊聊大前端,分享前端系统架构,框架实现原理,最新最高效的技术实践!