vue中css樣式的提取與引用

2021-10-10 06:22:28 字數 928 閱讀 6332

在css的使用中,我們對一些常用、公共的css樣式,可以單獨提取出來,在用到地方再使用,可以保證一些公共的樣式一致性、增強**的維護性等。

新建乙個「物件內文字溢位時顯示省略號」的樣式:ellipsis.styl

ellipsis()

overflow: hidden

white-space: nowrap

text-overflow: ellipsis

新建乙個「公共的顏色、字型大小」的樣式:varibles.styl

$bgcolor = #00bcd4
在使用的時候,我們需要引入這個檔案,

@代表src目錄 在css中使用時,需要前面加個~(波浪線)

@import 『…/…/…/assets/styles/varibles.styl』 等價於

@import 『~@/assets/styles/varibles.styl』 等價於

這裡我們也可以對路徑起乙個別名,需要在webpack.base.conf.js中做出修改(改後需要重啟):

module.exports =

}}

src/assets/styles 起乙個別名:styles,之後就可以用這個別名了,

@import 『~styles/varibles.styl』

在這個檔案中,我們還能看到@代表了sre目錄。

"stylus" scoped>

@import

'~styles/varibles.styl'

@import

'~styles/ellipsis.styl'

.aa

.bb

<

/style>

這樣子,在樣式中我們就可以這麼使用了!

vue中如何引用全域性的sass公共樣式

vue中如何引用全域性的sass公共樣式 sass擁有比其他任何css擴充套件語言更多的功能和特性。一次又一次地,行業把sass作為首選css擴充套件語言。在vue專案開發中你會發現,通過main.js 全域性引入的.scss 在.vue檔案中不能使用,那如何去解決這個問題呢?下面有兩種解決方法,可...

vue中全域性 按需引用element,樣式都不生效

簡直是天坑啊,這個問題困擾了我乙個晚上加今天一天,心裡無數草泥馬奔騰 被要求使用vue1.0 哈哈哈,我錯了,本前端小白不知道大家都讀的是v.u.e elementui做乙個後台管理專案,結果無論怎麼操作elementui,頁面中都不顯示css樣式 以為是腳手架的問題,就解除安裝了之前的3.0以下的...

Vue中的樣式

第一種 class的繫結 red thin italic active style class thin italic red class樣式第一種繫結 p class thin italic flag?red class樣式第二種繫結 三目運算子 p class thin italic class...