Vue中使用CSS前處理器 stylus以及配置全域性變數的方法

前言

不得不說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元件中的使用

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中的使用

如果大家按照上述的方式直接引入variables.syl檔案，在元件中去使用時就會發現變數是無效的，不能被解析

正確方式

// 需要在App.vue中單獨引入變數檔案

那麼問題來了，在每一個需要使用變數的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中使用變數即可！！！

後記

以上就是胡哥今天給大家分享的內容，喜歡的小夥伴記得收藏、點贊呦。順便還可以讚賞一下，請我喝杯咖啡...

作者：JustBeCoder
連結：