在Vue中使用Compass

這次帶給大家在Vue中使用Compass，在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檔案中

#相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

AjaxUpLoad.js怎麼實作檔案上傳

操作Vue渲染與外掛程式載入的順序

以上是在Vue中使用Compass的詳細內容。更多資訊請關注PHP中文網其他相關文章！