stylus是css預(yù)處理器。還有另外兩種css預(yù)處理器語言詳解：less、sass。
不懂的可以先看一下這篇文章：stylus預(yù)處理入門
在vue項(xiàng)目引入stylus css預(yù)處理器，可以讓我們的css也可以更加靈活。可以看一下圖中的stylus 文件，以styl結(jié)尾。

image.png

?

在寫基于vue-cli的vue項(xiàng)目時(shí)，如果直接引入styl文件，會(huì)報(bào)錯(cuò)，需要安裝stylus、stylus-loader依賴以及別名配置。其實(shí)使用styl文件很簡(jiǎn)單，但是剛開始搞，還是會(huì)搞死人的。具體的步驟如下：

1 安裝stylus、stylus-loader依賴

推薦cnpm，因?yàn)榭臁＿M(jìn)入項(xiàng)目文件下，使用命令

cnpm install stylus stylus-loader

2 package.json文件配置

上述命令并不會(huì)幫我們安裝到配置文件，需要我們自己配置下，如下，添加上這兩項(xiàng)配置

"devDependencies": {..."stylus": "^0.54.5","stylus-loader": "^3.0.2", ... },

3 別名配置

配置別名為了在引用的時(shí)候，程序能夠加載正確的路徑。
打開文件根目錄下 build >webpack.base.conf.js

resolve: {extensions: ['.js', '.vue', '.json'], alias: { 'src': resolve('src'), '@': resolve('src'), 'common':resolve('src/common') } },

• common :別名
• 'src/common' :styl路徑

這樣我們就可以使用common引入styl文件了。

引入

我們將組合的樣式匯集在index.styl中
目錄結(jié)構(gòu)：

image.png index.styl

在main.js中引入index.styl

import Vue from 'vue' import App from './App' // import router from './router' import 'common/stylus/index.styl'

在組件中引入

<style scoped lang="stylus"> @import "~common/stylus/variable.styl" #app color: $color-theme </style>

小禮物走一走，來簡(jiǎn)書關(guān)注我

作者：布丁貓
鏈接：https://www.jianshu.com/p/62b4b93d4c97
來源：簡(jiǎn)書
簡(jiǎn)書著作權(quán)歸作者所有，任何形式的轉(zhuǎn)載都請(qǐng)聯(lián)系作者獲得授權(quán)并注明出處。

轉(zhuǎn)載于:https://www.cnblogs.com/youqc/p/10910085.html

總結(jié)

以上是生活随笔為你收集整理的vue-cli构建的vue项目中引入stylus文件的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。