如何在mpvue中使用stylus,並配置全局變量文件

1、stylus的介紹

這個兄弟學名叫 stylus，是 CSS 的預處理框架。 CSS 預處理，顧名思義，預先處理 CSS。那 stylus 咋預先處理呢？stylus 給 CSS 添加了可編程的特性，也就是說，在 stylus 中可使用變量、函數、判斷、循環一系列 CSS 沒有的東西來編寫樣式文件，執行這一套騷操做以後，這個文件可編譯成 CSS 文件

2、爲什麼使用stylus和配置

在每個須要使用變量的component組件中都須要單獨引入index.styl文件，不只進行了屢次重複性的操做，並且文件名稱一旦發生改變，維護更新很是麻煩，很是的不人性化。

3、stylus的基本使用

一、在項目目錄下，安裝stylus、stylus-loader包

npm i stylus stylus-loader -D

二、webpack中的配置

//配置文件修改   build/webpack.base.conf.js
rules中添加，以下圖所示
{
    test: /\.styl$/,
    loaders: ['style-loader', 'css-loader', 'stylus-loader']
  },
複製代碼

三、配置文件build/until.js

在generateLoaders方法的後面!後面！後面！(強調) 以下圖

const stylusOptions = {
import: [path.join(__dirname, "../src/stylus/variables.styl")],  //你公共樣式存放的位置
paths: [path.join(__dirname, '../src/stylus'), path.join(__dirname, '../')]  //公共樣式文件位置
}
return {
css: generateLoaders(),
wxss: generateLoaders(),
postcss: generateLoaders(),
less: generateLoaders('less'),
sass: generateLoaders('sass', { indentedSyntax: true }),
scss: generateLoaders('sass'),
stylus: generateLoaders('stylus', stylusOptions),  //紅色文字對應上方配置
styl: generateLoaders('stylus')
}
複製代碼

四、最後重啓

修改配置文件後，必定要記得重啓服務

4、mpvue中使用stylus

一、app.vue中引入

index.styl //統一入口

@import "./mixin.styl"
@import "./reset.styl"
@import "./common.styl"
@import "./variables.styl"
複製代碼

二、variables.styl存放全局變量

variables.styl
//主題顏色
themeColor = #027fff
//白色
whiteColor = #ffffff
//黑色
blackColor = #000000
//通用灰色
grayColor = #b2b2b2
//背景色
backGroundColor = #f4f5f5
//邊框色
borderColor = #e1e1e1
//消息提醒框背景色
messageBackgroundColor = red
//主文本顏色
textColor = #666666
//足跡主題顏色
footColor = #49EAE5
複製代碼

三、頁面使用

5、注意事項

因爲使用了stylus後會自動補全樣式，因此會致使有些樣式在小程序下沒法支持，這時候只須要再添加一個style標籤放入不想補全的樣式便可，以下圖