vue項目中使用scss的方法步驟
一 概述
隨著sass/less等css預(yù)處理器的出現(xiàn)，編寫css變的越來越有樂趣。所以現(xiàn)在越來越多的人在項目中喜歡使用scss或者less。（我自己就是一個）。由于最近在寫一個vue項目。所以就把寫項目期間每天的一些知識點寫在博客里。所以最近的博客應(yīng)該都會和vue有關(guān)。今天要和大家分享的就是如何在vue項目中引入scss（引入less也類似）
二 vue中引入scss
2.1 vue-loader
在講如何在vue項目中使用scss之前，我們先來簡單了解一個概念，那就是vue-loader。vue-loader是什么東西呢？vue-loader其實就是一個webpack的loader。用來把vue組件轉(zhuǎn)換成可部署的js,html,css模塊。所以我們?nèi)绻朐賤ue項目中使用scss,肯定要告訴vue-loader怎么樣解析我的scss文件。
不了解webpack的同學(xué)可以先去自行百度。我這里就放一張圖，看完大家可以也就能知道webpack能做些什么事情了。
2.2 loader配置
在webpack中，所有預(yù)處理器都要匹配相應(yīng)的loader,vue-loader允許其他的webpack-loader處理組件中的一部分嗎，然后它根據(jù)lang屬性自動判斷出要使用的loaders。所以，其實只要安裝處理sass/scss的loader。就能在vue中使用scss了。
現(xiàn)在我們來安裝sass/scss loader
npm install sass-loader node-sass --save-dev
2.3 為什么無需配置
我們前面說到,vue-loader允許能根據(jù)lang屬性自動判斷出要使用的loaders。它是怎么樣做到的？有這么神奇嘛？我們下面來看一看最核心部分的源代碼
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有了這種能力，它會根據(jù)不同的文件去使用不同的loader
2.4 使用scss
這樣你就可以愉快的使用scss了。
<style scoped lang="sass"> xxxx xxxx </style>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Vue.js 是一個流行的前端JavaScript框架,用于構(gòu)建用戶界面,在這個"vue網(wǎng)頁登錄界面"的示例中,我們探討的是如何使用Vue.js創(chuàng)建一個簡單的登錄頁面,感興趣的小伙伴跟著小編一起來看看吧2025-04-04
Vue.js每天必學(xué)之構(gòu)造器與生命周期，告訴大家什么是Vue.js構(gòu)造器與生命周期，感興趣的小伙伴們可以參考一下2016-09-09
Vue讀取本地靜態(tài)文件json的2種方法以及優(yōu)缺點
這篇文章主要介紹了Vue讀取本地靜態(tài)文件json的2種方法以及優(yōu)缺點說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
vue使用v-if v-show頁面閃爍,div閃現(xiàn)的解決方法
在頁面層次結(jié)構(gòu)，數(shù)據(jù)較多的時候，用v-if或者v-show就會出現(xiàn)div閃現(xiàn)，或者部分閃爍的結(jié)果。怎么處理這樣的問題呢，下面小編給大家?guī)砹藇ue使用v-if v-show頁面閃爍,div閃現(xiàn)的解決方法，一起看看吧2018-10-10
這篇文章主要介紹了vue-cli3添加模式配置多環(huán)境變量的方法，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-06-06
這篇文章主要介紹了詳解elementUI中input框無法輸入的問題，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
插槽就是子組件中的提供給父組件使用的一個占位符，用<slot></slot> 表示，父組件可以在這個占位符中填充任何模板代碼，如 HTML、組件等，填充的內(nèi)容會替換子組件的<slot></slot>標簽，這篇文章主要介紹了Vue插槽的理解和使用,需要的朋友可以參考下2023-03-03
這篇文章主要給大家介紹了關(guān)于vue項目history模式刷新404問題的解決辦法,需要的朋友可以參考下2023-11-11
Element UI 上傳組件實現(xiàn)文件上傳并附帶額外參數(shù)功能
在使用 ElementUI 的上傳組件 el-upload 實現(xiàn)文件上傳功能時,如果單文件上傳是比較簡單的,但是在實際需求中,往往會在上傳文件時伴隨著一些其他參數(shù),怎么操作呢,下面通過示例代碼講解感興趣的朋友一起看看吧2023-08-08
在vue2中 使用的?this.$route?和?this.$router?this.$store的使用在vue3中完全適用，這篇文章主要介紹了Vue3 使用Vuex和router的注意事項及操作方法,需要的朋友可以參考下2022-12-12