在Vue中使用Compass的方法

更新時間：2018年03月02日 16:38:28 作者：GoogoKMChi

本篇文章主要介紹了在Vue中使用Compass的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

寫作動機

拖了蠻久的，總算下定決心要給自己寫一個個人網(wǎng)站，不僅要看起來狂拽酷炫，技術(shù)也要OK，所以趁此機會也將自己不熟悉的技術(shù)拿來鍛煉一下。網(wǎng)站打算用Vue來作為前端框架，Css用Sass來寫。但是尚未正式開始就突然想到，既然Sass有Compass這么有力的工具不用豈不是步子邁小了，然而找了一輪發(fā)現(xiàn)都是說怎樣在Vue項目中使用Sass而沒有Compass的解決方案。但是這么放棄一個強大的工具練習(xí)不了又不甘心，于是各種繼續(xù)搜索和嘗試后總算是成功在項目中用上了Compass，然后屁顛的就來分享了，如果能幫到有這個需求猿，那也是極好的了。閑話不多說，開始擼代碼，最后我會將這個Demo放到GitHub(￣▽￣)~*

用vue-cli建個項目

vue init webpack compass-demo //擼個燒烤架
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')] }),
  ...
 }
}
...

就這么簡單

*.sass文件中

*.vue文件中

愉快的擼吧~

附上Demo GitHub的地址vue-compass

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

Vue
Compass

相關(guān)文章

當(dāng)啟動vue項目安裝依賴時報錯的解決方案
這篇文章主要介紹了當(dāng)啟動vue項目安裝依賴時報錯的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-04-04
vue學(xué)習(xí)筆記之指令v-text && v-html && v-bind詳解
這篇文章主要介紹了vue學(xué)習(xí)筆記之指令v-text && v-html && v-bind詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-05-05
vue項目本地開發(fā)完成后部署到服務(wù)器后報404錯誤解決方案
很多時候我們發(fā)現(xiàn)辛辛苦苦寫的VueJs應(yīng)用經(jīng)過打包后在自己本地搭建的服務(wù)器上測試沒有什么問題,但真正放在服務(wù)器上后會發(fā)現(xiàn)或多或少的問題,這篇文章主要給大家介紹了關(guān)于vue項目本地開發(fā)完成后部署到服務(wù)器后報404錯誤的解決方案,需要的朋友可以參考下
2024-01-01
vue實現(xiàn)商品詳情頁功能之商品選項卡
這篇文章主要為大家詳細介紹了vue實現(xiàn)商品詳情頁功能之商品選項卡，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-04-04
用vue封裝插件并發(fā)布到npm的方法步驟
本篇文章主要介紹了用vue封裝插件并發(fā)布到npm的方法步驟，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-10-10
Vue中ElementUI結(jié)合transform使用時彈框定位不準(zhǔn)確問題解析
在近期開發(fā)中,需要將1920*1080放到更大像素大屏上演示,所以需要使用到transform來對頁面進行縮放,但是此時發(fā)現(xiàn)彈框定位出錯問題,無法準(zhǔn)備定位到實際位置,本文給大家分享Vue中ElementUI結(jié)合transform使用時彈框定位不準(zhǔn)確解決方法,感興趣的朋友一起看看吧
2024-01-01
element表單校驗提示定位到元素位置
本文主要介紹了element表單校驗提示定位到元素位置，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2022-08-08
vue cli如何配置開發(fā)環(huán)境下的sourcemap
這篇文章主要介紹了vue cli如何配置開發(fā)環(huán)境下的sourcemap問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-06-06
Vue刷新修改頁面中數(shù)據(jù)的方法
今天小編就為大家分享一篇Vue刷新修改頁面中數(shù)據(jù)的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-09-09
Vue3使用watch進行深度觀察的操作方法
在 Vue 3 中,一個重要的特性是 watch 選項,它允許開發(fā)者對數(shù)據(jù)變化進行觀察,本篇博客將詳細介紹如何在 Vue 3 中使用 watch 進行深度觀察,特別是在使用 setup 語法糖時,需要的朋友可以參考下
2024-11-11