vue項目中使用scss的方法步驟
一 概述
隨著sass/less等css預處理器的出現(xiàn),編寫css變的越來越有樂趣。所以現(xiàn)在越來越多的人在項目中喜歡使用scss或者less。(我自己就是一個)。由于最近在寫一個vue項目。所以就把寫項目期間每天的一些知識點寫在博客里。所以最近的博客應該都會和vue有關。今天要和大家分享的就是如何在vue項目中引入scss(引入less也類似)
二 vue中引入scss
2.1 vue-loader
在講如何在vue項目中使用scss之前,我們先來簡單了解一個概念,那就是vue-loader。vue-loader是什么東西呢?vue-loader其實就是一個webpack的loader。用來把vue組件轉換成可部署的js,html,css模塊。所以我們?nèi)绻朐賤ue項目中使用scss,肯定要告訴vue-loader怎么樣解析我的scss文件。
不了解webpack的同學可以先去自行百度。我這里就放一張圖,看完大家可以也就能知道webpack能做些什么事情了。
2.2 loader配置
在webpack中,所有預處理器都要匹配相應的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)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
vue使用pdfjs-dist+fabric實現(xiàn)pdf電子簽章的思路詳解
最近領導提了一個新需求:仿照e簽寶,實現(xiàn)pdf電子簽章,本文給大家介紹vue使用pdfjs-dist+fabric實現(xiàn)pdf電子簽章的思路,感興趣的朋友一起看看吧2023-12-12vue3組合式API中setup()概念和reactive()函數(shù)的用法
這篇文章主要介紹了vue3組合式API中setup()概念和reactive()函數(shù)的用法,接下來的事件,我將帶著你從淺到深分析為什么我們需要學習組合式API以及我們的setup()函數(shù)作為入口函數(shù)的一個基本的使用方式,需要的朋友可以參考下2023-03-03Vue transition實現(xiàn)點贊動畫效果的示例
點贊動畫是網(wǎng)頁評論中常見的功能,本文將介紹如何用vue實現(xiàn)這一效果。點贊時愛心縮小變大,變大時略微大一點再變正常,取消點贊時愛心無動畫,同時數(shù)字滾動,+1 時向上滾動,-1 時向下滾動2021-05-05Vue cli3 庫模式搭建組件庫并發(fā)布到 npm的流程
這篇文章主要介紹了Vue cli3 庫模式搭建組件庫并發(fā)布到 npm,以下一個簡單的顏色選擇器插件 vColorPicker 講述從開發(fā)到上線到npm的流程,需要的朋友可以參考下2018-10-10