VUE項(xiàng)目中SASS的使用及說明
最近在做vue腳手架搭建項(xiàng)目，下一步希望實(shí)現(xiàn)響應(yīng)式布局，查找的資料說要實(shí)現(xiàn)vue的響應(yīng)式布局，就要用到sass。
然后決定一步步來，先學(xué)習(xí)使用sass。
下載Ruby
安裝sass之前必須先安裝Ruby,Ruby下載的地址為：https://rubyinstaller.org/downloads/
找到適合自己電腦的版本下載就可以了。
安裝Ruby
下載完Ruby的安裝包之后，勾選“Add executables to your path” 選項(xiàng)，點(diǎn)擊下一步（很多都會(huì)默認(rèn)選擇了這個(gè)選項(xiàng)）。
在安裝的過程出現(xiàn)了要安裝SYS的選項(xiàng)，我只是想要簡(jiǎn)單地使用一下Ruby來安裝sass而已，所以并沒有勾選這個(gè)選項(xiàng)，安裝完發(fā)現(xiàn)不選這個(gè)選項(xiàng)并沒有影響我使用sass。
安裝sass
在命令行輸入gem install
sass使用sass
我是看Sass官網(wǎng)的基礎(chǔ)入門教程的，基本的使用說得很詳細(xì)，傳送門：
在vue使用sass
上面說的是sass的基本語法，最終目的還是要在vue中使用sass，但是我遇到了許多問題：
1.安裝sass依賴包
npm install node-sass --save-dev npm install sass-loader --save-dev
直接安裝node-sass報(bào)錯(cuò)，所以使用了淘寶鏡像
$ npm install -g cnpm --registry=https://registry.npm.taobao.org （安裝淘寶鏡像） $ cnpm install node-sass --save-dev （使用淘寶鏡像安裝node-sass）
一些教程說要進(jìn)入webpack.base.config.js文件更改配置，我用的是最新的腳手架，所以根本就沒有這個(gè)文件，其實(shí)好像安裝的時(shí)候會(huì)自動(dòng)配置好的，后來也能正確使用sass。
2.webstorm彈出提示詢問要不要file watcher
我選擇了no
3.在App.vue的style
style lang=‘sass'
4.在App的style中引入新建的sass文件
完成上面的一系列操作之后，懷著忐忑的心情在test.sass文件中放入以下代碼：
$highlight-color: #F90
h1 {
color: $highlight-color;
}然后編譯器報(bào)錯(cuò)了?。?！
語法問題，等我把中括號(hào)和分號(hào)去掉之后，報(bào)錯(cuò)消失了，好迷茫
雖然正常顯示和使用了，但是對(duì)于為什么用了中括號(hào)和分號(hào)會(huì)報(bào)錯(cuò)，還需要進(jìn)行下一步的探究，這一次就先到這里，有結(jié)果再進(jìn)一步補(bǔ)充。
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue實(shí)現(xiàn)點(diǎn)擊箭頭上下移動(dòng)效果
這篇文章主要介紹了Vue實(shí)現(xiàn)點(diǎn)擊箭頭上下移動(dòng)效果，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-06-06
vue3簡(jiǎn)易實(shí)現(xiàn)proxy代理實(shí)例詳解
這篇文章主要為大家詳細(xì)介紹了Python實(shí)現(xiàn)學(xué)生成績(jī)管理系統(tǒng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-03-03
vue select二級(jí)聯(lián)動(dòng)第二級(jí)默認(rèn)選中第一個(gè)option值的實(shí)例
下面小編就為大家分享一篇vue select二級(jí)聯(lián)動(dòng)第二級(jí)默認(rèn)選中第一個(gè)option值的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-01-01
vue項(xiàng)目中使用crypto-js實(shí)現(xiàn)加密解密方式
這篇文章主要介紹了vue項(xiàng)目中使用crypto-js實(shí)現(xiàn)加密解密方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-05-05
el-select如何獲取當(dāng)前選中的對(duì)象所有(item)數(shù)據(jù)
在開發(fā)業(yè)務(wù)場(chǎng)景中我們通常遇到一些奇怪的需求,下面這篇文章主要給大家介紹了關(guān)于el-select如何獲取當(dāng)前選中的對(duì)象所有(item)數(shù)據(jù)的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-11-11
vue計(jì)時(shí)器的實(shí)現(xiàn)方法
這篇文章主要為大家詳細(xì)介紹了vue計(jì)時(shí)器的實(shí)現(xiàn)方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-06-06
淺談實(shí)現(xiàn)在線預(yù)覽PDF的幾種解決辦法
這篇文章主要介紹了淺談實(shí)現(xiàn)在線預(yù)覽PDF的幾種解決辦法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-08-08
Vue的異步組件加載的實(shí)現(xiàn)方法小結(jié)
在 Vue 中,異步組件是指那些在需要時(shí)才會(huì)被加載的組件,與傳統(tǒng)的靜態(tài)組件不同,異步組件通過動(dòng)態(tài)加載的方式,可以有效地減少初始加載的資源和時(shí)間,在 Vue 中實(shí)現(xiàn)異步組件加載非常簡(jiǎn)單,開發(fā)者有多種方法可以做到,本文給大家介紹了一些常用的實(shí)現(xiàn)方法2024-11-11
在 Vue 3 中上傳 KML 文件并在地圖上顯示的實(shí)現(xiàn)方法
KML 文件作為一種標(biāo)準(zhǔn)的地理數(shù)據(jù)格式,廣泛應(yīng)用于地理信息系統(tǒng)（GIS）中,通過 OpenLayers 和 Vue 3 的組合,您可以方便地實(shí)現(xiàn)地圖數(shù)據(jù)的可視化和交互,本文介紹在 Vue 3 中上傳 KML 文件并在地圖上顯示的實(shí)現(xiàn)方法,感興趣的朋友一起看看吧2024-12-12
vue中使用better-scroll實(shí)現(xiàn)滑動(dòng)效果及注意事項(xiàng)
這篇文章主要介紹了vue中使用better-scroll實(shí)現(xiàn)滑動(dòng)效果，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-11-11