vue項(xiàng)目中使用scss的方法步驟
一 概述
隨著sass/less等css預(yù)處理器的出現(xiàn)，編寫css變的越來(lái)越有樂(lè)趣。所以現(xiàn)在越來(lái)越多的人在項(xiàng)目中喜歡使用scss或者less。（我自己就是一個(gè)）。由于最近在寫一個(gè)vue項(xiàng)目。所以就把寫項(xiàng)目期間每天的一些知識(shí)點(diǎn)寫在博客里。所以最近的博客應(yīng)該都會(huì)和vue有關(guān)。今天要和大家分享的就是如何在vue項(xiàng)目中引入scss（引入less也類似）
二 vue中引入scss
2.1 vue-loader
在講如何在vue項(xiàng)目中使用scss之前，我們先來(lái)簡(jiǎn)單了解一個(gè)概念，那就是vue-loader。vue-loader是什么東西呢？vue-loader其實(shí)就是一個(gè)webpack的loader。用來(lái)把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屬性自動(dòng)判斷出要使用的loaders。所以，其實(shí)只要安裝處理sass/scss的loader。就能在vue中使用scss了。
現(xiàn)在我們來(lái)安裝sass/scss loader
npm install sass-loader node-sass --save-dev
2.3 為什么無(wú)需配置
我們前面說(shuō)到,vue-loader允許能根據(jù)lang屬性自動(dòng)判斷出要使用的loaders。它是怎么樣做到的？有這么神奇嘛？我們下面來(lái)看一看最核心部分的源代碼
exports.cssLoaders = function (options) {
options = options || {}
var cssLoader = {
loader: 'css-loader',
options: {
minimize: process.env.NODE_ENV === 'production',
sourceMap: options.sourceMap
}
}
// generate loader string to be used with extract text plugin
function generateLoaders (loader, loaderOptions) {
var loaders = [cssLoader]
if (loader) {
loaders.push({
loader: loader + '-loader',
options: Object.assign({}, loaderOptions, {
sourceMap: options.sourceMap
})
})
}
// Extract CSS when that option is specified
// (which is the case during production build)
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
fallback: 'vue-style-loader'
})
} else {
return ['vue-style-loader'].concat(loaders)
}
}
// https://vue-loader.vuejs.org/en/configurations/extract-css.html
return {
css: generateLoaders(),
postcss: generateLoaders(),
less: generateLoaders('less'),
sass: generateLoaders('sass', { indentedSyntax: true }),
scss: generateLoaders('sass'),
stylus: generateLoaders('stylus'),
styl: generateLoaders('stylus')
}
}
就是上述這段代碼讓vue-loader有了這種能力，它會(huì)根據(jù)不同的文件去使用不同的loader
2.4 使用scss
這樣你就可以愉快的使用scss了。
<style scoped lang="sass"> xxxx xxxx </style>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vue使用pdfjs-dist+fabric實(shí)現(xiàn)pdf電子簽章的思路詳解
最近領(lǐng)導(dǎo)提了一個(gè)新需求:仿照e簽寶,實(shí)現(xiàn)pdf電子簽章,本文給大家介紹vue使用pdfjs-dist+fabric實(shí)現(xiàn)pdf電子簽章的思路,感興趣的朋友一起看看吧2023-12-12
本文主要介紹了vue-element-admin下載到登錄的一些坑，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-04-04
vue3組合式API中setup()概念和reactive()函數(shù)的用法
這篇文章主要介紹了vue3組合式API中setup()概念和reactive()函數(shù)的用法,接下來(lái)的事件，我將帶著你從淺到深分析為什么我們需要學(xué)習(xí)組合式API以及我們的setup()函數(shù)作為入口函數(shù)的一個(gè)基本的使用方式，需要的朋友可以參考下2023-03-03
本文主要介紹了vite+vue3使用@路徑報(bào)錯(cuò)處理,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-11-11
這篇文章給大家介紹了基于vue封裝一個(gè)帶眼睛的密碼子組件的方法,文章中有詳細(xì)的代碼講解,對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2023-09-09
vue中的vendor.js文件過(guò)大問(wèn)題及解決
這篇文章主要介紹了vue中的vendor.js文件過(guò)大問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
vue2.0結(jié)合Element-ui實(shí)戰(zhàn)案例
這篇文章主要介紹了vue2.0結(jié)合Element-ui實(shí)戰(zhàn)案例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-03-03
Vue transition實(shí)現(xiàn)點(diǎn)贊動(dòng)畫效果的示例
點(diǎn)贊動(dòng)畫是網(wǎng)頁(yè)評(píng)論中常見的功能，本文將介紹如何用vue實(shí)現(xiàn)這一效果。點(diǎn)贊時(shí)愛心縮小變大，變大時(shí)略微大一點(diǎn)再變正常，取消點(diǎn)贊時(shí)愛心無(wú)動(dòng)畫，同時(shí)數(shù)字滾動(dòng)，+1 時(shí)向上滾動(dòng)，-1 時(shí)向下滾動(dòng)2021-05-05
Vue cli3 庫(kù)模式搭建組件庫(kù)并發(fā)布到 npm的流程
這篇文章主要介紹了Vue cli3 庫(kù)模式搭建組件庫(kù)并發(fā)布到 npm，以下一個(gè)簡(jiǎn)單的顏色選擇器插件 vColorPicker 講述從開發(fā)到上線到npm的流程,需要的朋友可以參考下2018-10-10
這篇文章主要介紹了vue2封裝input組件方式(輸入的雙向綁定)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。2023-04-04