vue項(xiàng)目中引入Sass實(shí)例方法

更新時(shí)間：2019年08月27日 15:28:30 作者：coolwan丶

在本文里小編給大家整理的是關(guān)于vue項(xiàng)目中引入Sass的相關(guān)知識(shí)點(diǎn)內(nèi)容，有需要的朋友們可以測(cè)試參考下。

Sass作為目前成熟，穩(wěn)定，強(qiáng)大的css擴(kuò)展語(yǔ)言，讓越來(lái)越多的前端工程師喜歡上它。下面介紹了如何在vue項(xiàng)目

中引入Sass。

首先在項(xiàng)目文件夾執(zhí)行命令 npm install vue-cli -g，安裝vue-cli腳手架，若是已經(jīng)安裝了，則不必再次安裝，直接

跳過(guò)這一步。接下來(lái)執(zhí)行命令行vue init webpack mypro（注：mypro是項(xiàng)目名）。

接下來(lái)安裝Sass依賴包，使用以下命令行：

npm install sass-loader --save-dev

npm install node-sass --save-dev

執(zhí)行完畢后，找到build文件夾，在文件夾里面的webpack.base.conf.js中修改以下配置：

在module下的rules里添加配置：

　　最后就到了應(yīng)用這一步了，只需設(shè)置lang="scss"

好了，是不是很簡(jiǎn)單。

以上就是vue項(xiàng)目中引入Sass全部知識(shí)點(diǎn)內(nèi)容，感謝大家對(duì)腳本之家的支持。

您可能感興趣的文章:

vue
Sass

相關(guān)文章

vue使用vue-i18n實(shí)現(xiàn)國(guó)際化的實(shí)現(xiàn)代碼
本篇文章主要介紹了vue使用vue-i18n實(shí)現(xiàn)國(guó)際化的實(shí)現(xiàn)代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-04-04
詳解vue組件通信的三種方式
本篇文章主要介紹了詳解vue組件通信的三種方式，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-06-06
Vue?監(jiān)視屬性之天氣案例實(shí)現(xiàn)
這篇文章主要介紹了Vue?監(jiān)視屬性之天氣案例實(shí)現(xiàn)，文章以天氣為例展開(kāi)介紹Vue?監(jiān)視屬性?的相關(guān)內(nèi)容，需要的小伙伴可以參考一下
2022-05-05
vue中過(guò)濾器的用法
這篇文章介紹了vue中過(guò)濾器的用法，文中通過(guò)示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2022-03-03
Vite開(kāi)發(fā)環(huán)境搭建詳解
Vite是一款非常輕量級(jí)的Web開(kāi)發(fā)框架，它可以幫助開(kāi)發(fā)者快速搭建一個(gè)開(kāi)發(fā)環(huán)境。Vite搭建的開(kāi)發(fā)環(huán)境可以提供更快的編譯速度，更少的配置，更好的性能和更多的開(kāi)發(fā)者友好性，使開(kāi)發(fā)者可以更快地構(gòu)建出功能強(qiáng)大的Web應(yīng)用程序。
2023-02-02
Vue+elementUI實(shí)現(xiàn)動(dòng)態(tài)展示列表的數(shù)據(jù)
這篇文章主要介紹了Vue+elementUI實(shí)現(xiàn)動(dòng)態(tài)展示列表的數(shù)據(jù)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-08-08
vue中nextTick函數(shù)和react類似實(shí)現(xiàn)代碼
Vue 3 中的 nextTick 主要通過(guò) Promise 實(shí)現(xiàn)異步調(diào)度,返回一個(gè) Promise 對(duì)象,這篇文章主要介紹了vue中nextTick函數(shù)和react類似實(shí)現(xiàn)代碼,需要的朋友可以參考下
2024-04-04
VUE3安裝element?ui失敗的原因以及解決辦法
這篇文章主要給大家介紹了關(guān)于VUE3安裝element?ui失敗的原因以及解決的相關(guān)資料,很多朋友升級(jí)使用Vue3了,但在安裝element?ui失敗出錯(cuò)了,這里給大家總結(jié)下,需要的朋友可以參考下
2023-09-09
vue3.0和vue2.0的區(qū)別詳細(xì)講解
vue經(jīng)歷從2.0到3.0更新之后,簡(jiǎn)??之就是變得更輕更快,使?起來(lái)更加?便,下面這篇文章主要給大家介紹了關(guān)于vue3.0和vue2.0區(qū)別的相關(guān)資料,需要的朋友可以參考下
2023-10-10
vue實(shí)現(xiàn)省市區(qū)的級(jí)聯(lián)選擇
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)省市區(qū)的級(jí)聯(lián)選擇，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-10-10