本篇文章主要介紹了在Vue中使用Compass的方法,現在分享給大家,也給大家做個參考。
寫作動機
拖了蠻久的,總算下定決心要給自己寫一個個人網站,不僅要看起來狂拽酷炫,技術也要OK ,所以趁此機會也將自己不熟悉的技術拿來鍛鍊一下。網站打算用Vue來當前端框架,Css用Sass來寫。但尚未正式開始就突然想到,既然Sass有Compass這麼有力的工具不用豈不是步子邁小了,然而找了一輪發現都是說怎樣在Vue專案中使用Sass而沒有Compass的解決方案。但這麼放棄一個強大的工具練習不了又不甘心,於是各種繼續搜尋和嘗試後總算是成功在專案中用上了Compass,然後屁顛的就來分享了,如果能幫到有這個需求猿,那也是極好的了。閒話不多說,開始擼程式碼,最後我會將這個Demo放到GitHub( ̄▽ ̄)~*
用vue-cli建個專案
#vue init webpack compass-demo //撸个烧烤架 npm install normalize.css axios vuex --save//撒上一些调味料 npm install node-sass sass-loader mockjs --save-dev//刷上一些酱汁 npm install compass-mixins --save-dev//把佐料在烧烤架上准备好后放上嫩肉
修改設定
修改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檔案中
#上面是我整理給大家的,希望今後對大家有幫助。
相關文章:
vue-infinite-loading2.0 中文文件詳解
Vue中的無限載入vue-infinite-loading的方法
#以上是有關在Vue中使用Compass的具體方法?的詳細內容。更多資訊請關注PHP中文網其他相關文章!