在Vue中使用Compass的方法
寫作動(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)寫。但是尚未正式開(kā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ō)，開(kāi)始擼代碼，最后我會(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文件中
愉快的擼吧~
附上Demo GitHub的地址vue-compass
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家介紹了vue使用Echarts畫柱狀圖，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2022-01-01
這篇文章主要介紹了vue+webpack中配置ESLint，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-11-11
Vue.js是現(xiàn)在比較優(yōu)秀的Web前端框架,非常推薦大家入門學(xué)習(xí),這篇文章主要給大家介紹了關(guān)于如何一步步從零搭建一個(gè)Vue項(xiàng)目的相關(guān)資料,文中通過(guò)圖文以及實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-05-05
vue 解決無(wú)法對(duì)未定義的值,空值或基元值設(shè)置反應(yīng)屬性報(bào)錯(cuò)問(wèn)題
這篇文章主要介紹了vue 解決無(wú)法對(duì)未定義的值,空值或基元值設(shè)置反應(yīng)屬性報(bào)錯(cuò)問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07
本篇文章主要介紹了vue-axios使用詳解，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-05-05
解決Vue2跨域報(bào)錯(cuò)AxiosError?net::ERR_FAILED、?Network?Error、ERR_N
這篇文章主要給大家介紹了關(guān)于解決Vue2跨域報(bào)錯(cuò)AxiosError?net::ERR_FAILED、?Network?Error、ERR_NETWORK的相關(guān)資料,文中通過(guò)圖文介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11
vue quill editor 使用富文本添加上傳音頻功能
vue-quill-editor 是vue項(xiàng)目中常用的富文本插件，其功能能滿足大部分的項(xiàng)目需求。這篇文章主要介紹了vue-quill-editor 富文本添加上傳音頻功能,需要的朋友可以參考下2020-01-01
Vue之使用mockjs生成模擬數(shù)據(jù)案例詳解
這篇文章主要介紹了Vue之使用mockjs生成模擬數(shù)據(jù)案例詳解,本篇文章通過(guò)簡(jiǎn)要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下2021-09-09
本篇文章主要介紹了Vue的Class與Style綁定的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09
這篇文章主要介紹了在vue中使用Base64轉(zhuǎn)碼的案例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-08-08