vue項(xiàng)目中使用scss的方法步驟-創(chuàng)新互聯(lián)

一 概述

專注于為中小企業(yè)提供成都網(wǎng)站建設(shè)、網(wǎng)站建設(shè)服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)南崗免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動了成百上千家企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。

隨著sass/less等css預(yù)處理器的出現(xiàn)，編寫css變的越來越有樂趣。所以現(xiàn)在越來越多的人在項(xiàng)目中喜歡使用scss或者less。（我自己就是一個）。由于最近在寫一個vue項(xiàng)目。所以就把寫項(xiàng)目期間每天的一些知識點(diǎn)寫在博客里。所以最近的博客應(yīng)該都會和vue有關(guān)。今天要和大家分享的就是如何在vue項(xiàng)目中引入scss（引入less也類似）

二 vue中引入scss

2.1 vue-loader

在講如何在vue項(xiàng)目中使用scss之前，我們先來簡單了解一個概念，那就是vue-loader。vue-loader是什么東西呢？vue-loader其實(shí)就是一個webpack的loader。用來把vue組件轉(zhuǎn)換成可部署的js,html,css模塊。所以我們?nèi)绻朐賤ue項(xiàng)目中使用scss,肯定要告訴vue-loader怎么樣解析我的scss文件。

不了解webpack的同學(xué)可以先去自行百度。我這里就放一張圖，看完大家可以也就能知道webpack能做些什么事情了。

2.2 loader配置

在webpack中，所有預(yù)處理器都要匹配相應(yīng)的loader,vue-loader允許其他的webpack-loader處理組件中的一部分嗎，然后它根據(jù)lang屬性自動判斷出要使用的loaders。所以，其實(shí)只要安裝處理sass/scss的loader。就能在vue中使用scss了。

現(xiàn)在我們來安裝sass/scss loader

npm install sass-loader node-sass --save-dev

文章題目：vue項(xiàng)目中使用scss的方法步驟-創(chuàng)新互聯(lián)
分享地址：http://bm7419.com/article34/dihgse.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供軟件開發(fā)、網(wǎng)站營銷、用戶體驗(yàn)、網(wǎng)站導(dǎo)航、App設(shè)計(jì)、網(wǎng)站策劃

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)