欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

在Vue中使用Compass的方法

 更新時間：2018年03月02日 16:38:28   作者：GoogoKMChi  
本篇文章主要介紹了在Vue中使用Compass的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

寫作動機

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

用vue-cli建個項目

vue init webpack compass-demo //擼個燒烤架
npm install normalize.css axios vuex --save//撒上一些調(diào)味料
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

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

  • 詳解vue使用Echarts畫柱狀圖

    詳解vue使用Echarts畫柱狀圖

    這篇文章主要為大家介紹了vue使用Echarts畫柱狀圖，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助
    2022-01-01
  • vue+webpack中配置ESLint

    vue+webpack中配置ESLint

    這篇文章主要介紹了vue+webpack中配置ESLint，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2018-11-11
  • 帶你一步步從零搭建一個Vue項目

    帶你一步步從零搭建一個Vue項目

    Vue.js是現(xiàn)在比較優(yōu)秀的Web前端框架,非常推薦大家入門學習,這篇文章主要給大家介紹了關(guān)于如何一步步從零搭建一個Vue項目的相關(guān)資料,文中通過圖文以及實例代碼介紹的非常詳細,需要的朋友可以參考下
    2022-05-05
  • vue 解決無法對未定義的值,空值或基元值設(shè)置反應(yīng)屬性報錯問題

    vue 解決無法對未定義的值,空值或基元值設(shè)置反應(yīng)屬性報錯問題

    這篇文章主要介紹了vue 解決無法對未定義的值,空值或基元值設(shè)置反應(yīng)屬性報錯問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-07-07
  • vue-axios使用詳解

    vue-axios使用詳解

    本篇文章主要介紹了vue-axios使用詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2017-05-05
  • 解決Vue2跨域報錯AxiosError?net::ERR_FAILED、?Network?Error、ERR_NETWORK

    解決Vue2跨域報錯AxiosError?net::ERR_FAILED、?Network?Error、ERR_N

    這篇文章主要給大家介紹了關(guān)于解決Vue2跨域報錯AxiosError?net::ERR_FAILED、?Network?Error、ERR_NETWORK的相關(guān)資料,文中通過圖文介紹的非常詳細,需要的朋友可以參考下
    2022-11-11
  • vue quill editor 使用富文本添加上傳音頻功能

    vue quill editor 使用富文本添加上傳音頻功能

    vue-quill-editor 是vue項目中常用的富文本插件，其功能能滿足大部分的項目需求。這篇文章主要介紹了vue-quill-editor 富文本添加上傳音頻功能,需要的朋友可以參考下
    2020-01-01
  • Vue之使用mockjs生成模擬數(shù)據(jù)案例詳解

    Vue之使用mockjs生成模擬數(shù)據(jù)案例詳解

    這篇文章主要介紹了Vue之使用mockjs生成模擬數(shù)據(jù)案例詳解,本篇文章通過簡要的案例,講解了該項技術(shù)的了解與使用,以下就是詳細內(nèi)容,需要的朋友可以參考下
    2021-09-09
  • Vue的Class與Style綁定的方法

    Vue的Class與Style綁定的方法

    本篇文章主要介紹了Vue的Class與Style綁定的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2017-09-09
  • 在vue中使用Base64轉(zhuǎn)碼的案例

    在vue中使用Base64轉(zhuǎn)碼的案例

    這篇文章主要介紹了在vue中使用Base64轉(zhuǎn)碼的案例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-08-08

最新評論