在Vue中使用Compass的方法
寫作動(dòng)機(jī)
拖了蠻久的，總算下定決心要給自己寫一個(gè)個(gè)人網(wǎng)站，不僅要看起來狂拽酷炫，技術(shù)也要OK，所以趁此機(jī)會(huì)也將自己不熟悉的技術(shù)拿來鍛煉一下。網(wǎng)站打算用Vue來作為前端框架，Css用Sass來寫。但是尚未正式開始就突然想到，既然Sass有Compass這么有力的工具不用豈不是步子邁小了，然而找了一輪發(fā)現(xiàn)都是說怎樣在Vue項(xiàng)目中使用Sass而沒有Compass的解決方案。但是這么放棄一個(gè)強(qiáng)大的工具練習(xí)不了又不甘心，于是各種繼續(xù)搜索和嘗試后總算是成功在項(xiàng)目中用上了Compass，然后屁顛的就來分享了，如果能幫到有這個(gè)需求猿，那也是極好的了。閑話不多說，開始擼代碼，最后我會(huì)將這個(gè)Demo放到GitHub(￣▽￣)~*
用vue-cli建個(gè)項(xiàng)目
vue init webpack compass-demo //擼個(gè)燒烤架 npm install normalize.css axios vuex --save//撒上一些調(diào)味料 npm install node-sass sass-loader mockjs --save-dev//刷上一些醬汁 npm install compass-mixins --save-dev//把佐料在燒烤架上準(zhǔn)備好后放上嫩肉
修改配置
修改build/util.js
...
exports.cssLoaders = function (options) {
...
return {
...
// 將sass和scss修改為如下
sass: generateLoaders('sass', { indentedSyntax: true, includePaths: [path.resolve(__dirname, '../node_modules/compass-mixins/lib')] }),
scss: generateLoaders('sass', { includePaths: [path.resolve(__dirname, '../node_modules/compass-mixins/lib')] }),
...
}
}
...
就這么簡(jiǎn)單
*.sass文件中
*.vue文件中
愉快的擼吧~
附上Demo GitHub的地址vue-compass
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
當(dāng)啟動(dòng)vue項(xiàng)目安裝依賴時(shí)報(bào)錯(cuò)的解決方案
這篇文章主要介紹了當(dāng)啟動(dòng)vue項(xiàng)目安裝依賴時(shí)報(bào)錯(cuò)的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
vue學(xué)習(xí)筆記之指令v-text && v-html && v-bind詳解
這篇文章主要介紹了vue學(xué)習(xí)筆記之指令v-text && v-html && v-bind詳解，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-05-05
vue項(xiàng)目本地開發(fā)完成后部署到服務(wù)器后報(bào)404錯(cuò)誤解決方案
很多時(shí)候我們發(fā)現(xiàn)辛辛苦苦寫的VueJs應(yīng)用經(jīng)過打包后在自己本地搭建的服務(wù)器上測(cè)試沒有什么問題,但真正放在服務(wù)器上后會(huì)發(fā)現(xiàn)或多或少的問題,這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目本地開發(fā)完成后部署到服務(wù)器后報(bào)404錯(cuò)誤的解決方案,需要的朋友可以參考下2024-01-01
vue實(shí)現(xiàn)商品詳情頁功能之商品選項(xiàng)卡
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)商品詳情頁功能之商品選項(xiàng)卡，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-04-04
本篇文章主要介紹了用vue封裝插件并發(fā)布到npm的方法步驟，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-10-10
Vue中ElementUI結(jié)合transform使用時(shí)彈框定位不準(zhǔn)確問題解析
在近期開發(fā)中,需要將1920*1080放到更大像素大屏上演示,所以需要使用到transform來對(duì)頁面進(jìn)行縮放,但是此時(shí)發(fā)現(xiàn)彈框定位出錯(cuò)問題,無法準(zhǔn)備定位到實(shí)際位置,本文給大家分享Vue中ElementUI結(jié)合transform使用時(shí)彈框定位不準(zhǔn)確解決方法,感興趣的朋友一起看看吧2024-01-01
本文主要介紹了element表單校驗(yàn)提示定位到元素位置，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
vue cli如何配置開發(fā)環(huán)境下的sourcemap
這篇文章主要介紹了vue cli如何配置開發(fā)環(huán)境下的sourcemap問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-06-06
今天小編就為大家分享一篇Vue刷新修改頁面中數(shù)據(jù)的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09
在 Vue 3 中,一個(gè)重要的特性是 watch 選項(xiàng),它允許開發(fā)者對(duì)數(shù)據(jù)變化進(jìn)行觀察,本篇博客將詳細(xì)介紹如何在 Vue 3 中使用 watch 進(jìn)行深度觀察,特別是在使用 setup 語法糖時(shí),需要的朋友可以參考下2024-11-11