CSS使用問(wèn)題
在單文件組件中榔幸，編寫的樣式可以保證只對(duì)當(dāng)前組件的模板具有效果，添加scoped屬性到style標(biāo)簽中
<style scoped>
button {
color: 'red';
}
</style>
在一個(gè)*.vue文件中矮嫉，可以包含兩個(gè)style標(biāo)簽削咆，一個(gè)是scoped和non-scoped
<style>
/* global styles */
</style>
<style scoped>
/* local styles */
</style>
在單文件組件中引入CSS樣式，使用@import關(guān)鍵字
<style scoped>
比如說(shuō)我們的swiper 就可以在home組件中的style直接把swiper的css引進(jìn)來(lái)
@import "assets/css/bootstrap.min.css"
</style>
在main.js中引入css文件
// 引入重置樣式表
import './assets/reset.css'
項(xiàng)目中使用less進(jìn)行CSS樣式編寫
-
安裝
$ npm install --save less-loader less -
style標(biāo)簽添加樣式
<style lang="less" scoped> </style> -
編寫代碼
<style lang="less" scoped> @color: red; #home { background-color: cyan; a { color: @color; } p { color: @color; } } </style> 項(xiàng)目運(yùn)行之后蠢笋，會(huì)自動(dòng)將less轉(zhuǎn)為普通的css
-
less的使用規(guī)則拨齐，參照官網(wǎng)
http://www.bootcss.com/p/lesscss/
less特點(diǎn)- 變量
- 嵌套
- 混合
- 函數(shù) & 運(yùn)算
- …...
