在Vue中使用Compass的方法

發(fā)布時(shí)間：2020-10-25 20:31:16 來(lái)源：腳本之家閱讀：160 作者：GoogoKMChi 欄目：web開發(fā)

寫作動(dòng)機(jī)

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

*.vue文件中

在Vue中使用Compass的方法

愉快的擼吧~

附上Demo GitHub的地址vue-compass

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。

向AI問(wèn)一下細(xì)節(jié)

在Vue中使用Compass的方法

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽