首頁 > web前端 > js教程 > 主體

有關在Vue中使用Compass的具體方法?

亚连
發布: 2018-06-01 16:46:45
原創
1734 人瀏覽過

本篇文章主要介紹了在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 頁面切換效果之BubbleTransition

vue-infinite-loading2.0 中文文件詳解

Vue中的無限載入vue-infinite-loading的方法

#

以上是有關在Vue中使用Compass的具體方法?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!