Vue中使用CSS预处理器 stylus以及配置全局变量的方法

0.192字数 722阅读 2200

前言

不得不说CSS预处理器(Sass/Less/Stylus)极大的方便了前端研发攻城狮编写CSS样式,提供了变量定义、可嵌套的选择器、mixins混合书写、函数定义等诸多便捷的能力。

今天呢,胡哥就以stylus在vue中的使用为例, 为大家分享css预处理器的基本使用方式,以及全局变量的定义和便捷使用方式。

三种CSS预处理器在vue中的使用原理是相同的, 希望大家能触类旁通...

一、stylus的基本使用

  1. 下载安装stylus、stylus-loader包

    npm i stylus stylus-loader -D
    
  2. webpack中的配置(可选)

    //  配置文件 build/webpack.base.conf.js -- 对应vue-cli生成的项目
    module: {
      rules: [
        // 配置stylus
        {
           test: /\.styl$/,
           loader: 'style-loader!css-loader!stylus-loader'
         }               
       ] 
     }
    

    其实在vue-cli生成的vue2.0的项目中,此处的webpack可以不再进行配置,vue会自动检测如果使用了stylus语法,会自动调用stylus-loader进行解析处理

  3. stylus文件和在vue组件中使用stylus

    a. 单独配置stylus的文件,扩展名为.styl

     // assets/css/reset.styl 用于重置CSS样式
     *
       margin 0
       padding 0
     a 
       text-decoration none  
    

    b. vue组件中的使用

     <style lang="stylus">
       // 使用stylus语法书写即可 
     </style>        
    
  4. vue中加载stylus文件

    a. 在JS环境中

     // main.js
     import '@/assets/css/reset.styl'
    

    b. 在style中

    //App.vue中
    @import './assets/css/reset.styl'
    

二、配置stylus的全局变量使用方式

在项目开发中会约定一些公共统一的样式,比例定义文字默认颜色、默认背景色,鼠标悬浮色,统一配置到一个文件中,非常利于后期的维护更新。

// assets/css/variables.styl

// 定义背景色
bgColor = #f3f3f3
// 定义导航条背景色
navBgColor = #1d1f2a
// 定义hover激活色
hoverColor = #008dff

引入全局变量配置文件variables.styl

错误方式

// 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中使用变量即可!!!

后记

以上就是胡哥今天给大家分享的内容,喜欢的小伙伴记得收藏、点赞呦。顺便还可以赞赏一下,请我喝杯咖啡...

转载须知

原创不易:本文原创首发于简书,转载请注明来源地址和作者

推荐阅读更多精彩内容