在Vue中使用Compass

2018.4.12 重裝系統後發現run dev後各類錯，發現是由於沒有安裝Python環境，嘿哈（貌似仍是要求python2.7呢）

寫做動機

前端小白，Vue自學Sass自學，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文件中

愉快的擼吧~

附上Demo GitHub的地址vue-compass