Vue CLI3中使用compass normalize的方法
normalize:統(tǒng)一了基本的樣式,如margin: 0;(類似compass中的reset模塊)
compass:對sass的封裝,擴展
1.安裝
npm i normalize.css compass-mixins --save-dev
1.1 normalize.cssx引用
在main.js中
import 'normalize.css'
這樣就完成了引用,F(xiàn)12,查看
body { margin: 0; // 如果是0則說明normalize已經(jīng)起作用 }
2.1 compass引用
在vue.config.js中配置
module.exports = { css: { loaderOptions: { sass: { // 設(shè)置全局引用 data: ` @import "./node_modules/compass-mixins/lib/_compass.scss"; @import "./node_modules/compass-mixins/lib/compass/_layout.scss"; ` } } } }
這樣就可以使用compass提供的模塊功能,如
@include border-radius(20px); // css3模塊
其它功能:http://compass.aether.ru/
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Vue.js每天必學(xué)之?dāng)?shù)據(jù)雙向綁定
Vue.js每天必學(xué)之?dāng)?shù)據(jù)雙向綁定,如何進行綁定,如何進行數(shù)據(jù)雙向綁定,感興趣的小伙伴們可以參考一下2016-09-09Element Plus 日期選擇器獲取選中的日期格式(當(dāng)前日期/時間戳格式)
如果想要獲取選中的日期時間就需要通過,Element Plus 日期選擇器?format屬性和value-format屬性,format指定輸入框的格式,value-format?指定綁定值的格式,本篇文章就給大家介紹Element Plus 日期選擇器獲取選中的日期格式(當(dāng)前日期/時間戳格式),感興趣的朋友一起看看吧2023-10-10Vue3?使用v-model實現(xiàn)父子組件通信的方法(常用在組件封裝規(guī)范中)
這篇文章主要介紹了Vue3?使用v-model實現(xiàn)父子組件通信(常用在組件封裝規(guī)范中)的方法,本文通過實例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-06-06