Vue CLI3中使用compass normalize的方法
更新時(shí)間：2019年05月30日 11:29:30 作者：Dragon_慕碼人
這篇文章主要介紹了Vue CLI3中使用compass normalize的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
normalize：統(tǒng)一了基本的樣式，如margin: 0;（類似compass中的reset模塊）
compass：對(duì)sass的封裝，擴(kuò)展
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則說(shuō)明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/
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關(guān)文章
vue組件之間數(shù)據(jù)傳遞的方法實(shí)例分析
這篇文章主要介紹了vue組件之間數(shù)據(jù)傳遞的方法,結(jié)合實(shí)例形式分析了vue.js父組件與子組件之間數(shù)據(jù)傳遞相關(guān)操作技巧,需要的朋友可以參考下2019-02-02
如何使用vue-json-viewer插件展示JSON格式數(shù)據(jù)
這篇文章主要給大家介紹了關(guān)于如何使用vue-json-viewer插件展示JSON格式數(shù)據(jù)的相關(guān)資料,Vue-json-viewer是一個(gè)Vue組件,用于在Vue應(yīng)用中顯示JSON數(shù)據(jù)的可視化工具,需要的朋友可以參考下2023-11-11
vue 自定義指令directives及其常用鉤子函數(shù)說(shuō)明
這篇文章主要介紹了vue 自定義指令directives及其常用鉤子函數(shù)說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-01-01
今天封裝一個(gè)導(dǎo)航欄的組件,使用的Element的NavMenu組件。遇到一個(gè)問(wèn)題，本文主要介紹了Element el-menu中NavMenu的用法，感興趣的可以了解一下2023-04-04
vue中el-table和jsplumb實(shí)現(xiàn)連線功能
本文主要介紹了el-table和jsplumb實(shí)現(xiàn)連線功能，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07
vue模塊移動(dòng)組件的實(shí)現(xiàn)示例
這篇文章主要介紹了vue模塊移動(dòng)組件的實(shí)現(xiàn)示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05
Vue 2.0學(xué)習(xí)筆記之使用$refs訪問(wèn)Vue中的DOM
這篇文章主要介紹了Vue 2.0學(xué)習(xí)筆記之使用$refs訪問(wèn)Vue中的DOM，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-12-12
Vue3+TS實(shí)現(xiàn)語(yǔ)音播放組件的示例代碼
這篇文章主要介紹了如何利用Vue+TS實(shí)現(xiàn)一個(gè)簡(jiǎn)易的語(yǔ)音播放組件，文中的示例代碼講解詳細(xì)，對(duì)我們學(xué)習(xí)Vue有一定的幫助，需要的可以參考一下2022-03-03
近期在做ve3的項(xiàng)目時(shí)因?yàn)楣δ苄枰?需要獲取當(dāng)前路由的地址,下面這篇文章主要給大家介紹了關(guān)于vue3獲取當(dāng)前路由地址的兩種方法,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-10-10
詳解在Vue中使用TypeScript的一些思考(實(shí)踐)
這篇文章主要介紹了詳解在Vue中使用TypeScript的一些思考(實(shí)踐)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-07-07