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