欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue項目中使用scss的方法步驟

 更新時間:2019年05月16日 14:40:23   作者:淼淼真人  
這篇文章主要介紹了vue項目中使用scss的方法步驟,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧

一 概述

隨著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電子簽章的思路詳解

    vue使用pdfjs-dist+fabric實現(xiàn)pdf電子簽章的思路詳解

    最近領導提了一個新需求:仿照e簽寶,實現(xiàn)pdf電子簽章,本文給大家介紹vue使用pdfjs-dist+fabric實現(xiàn)pdf電子簽章的思路,感興趣的朋友一起看看吧
    2023-12-12
  • vue-element-admin下載到登錄的一些坑

    vue-element-admin下載到登錄的一些坑

    本文主要介紹了vue-element-admin下載到登錄的一些坑,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2022-04-04
  • vue3組合式API中setup()概念和reactive()函數(shù)的用法

    vue3組合式API中setup()概念和reactive()函數(shù)的用法

    這篇文章主要介紹了vue3組合式API中setup()概念和reactive()函數(shù)的用法,接下來的事件,我將帶著你從淺到深分析為什么我們需要學習組合式API以及我們的setup()函數(shù)作為入口函數(shù)的一個基本的使用方式,需要的朋友可以參考下
    2023-03-03
  • vite+vue3使用@路徑報錯處理

    vite+vue3使用@路徑報錯處理

    本文主要介紹了vite+vue3使用@路徑報錯處理,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2023-11-11
  • 基于vue封裝一個帶眼睛的密碼子組件

    基于vue封裝一個帶眼睛的密碼子組件

    這篇文章給大家介紹了基于vue封裝一個帶眼睛的密碼子組件的方法,文章中有詳細的代碼講解,對大家的學習或工作有一定的幫助,需要的朋友可以參考下
    2023-09-09
  • vue中的vendor.js文件過大問題及解決

    vue中的vendor.js文件過大問題及解決

    這篇文章主要介紹了vue中的vendor.js文件過大問題及解決方案,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-08-08
  • vue2.0結合Element-ui實戰(zhàn)案例

    vue2.0結合Element-ui實戰(zhàn)案例

    這篇文章主要介紹了vue2.0結合Element-ui實戰(zhàn)案例,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2019-03-03
  • Vue transition實現(xiàn)點贊動畫效果的示例

    Vue transition實現(xiàn)點贊動畫效果的示例

    點贊動畫是網(wǎng)頁評論中常見的功能,本文將介紹如何用vue實現(xiàn)這一效果。點贊時愛心縮小變大,變大時略微大一點再變正常,取消點贊時愛心無動畫,同時數(shù)字滾動,+1 時向上滾動,-1 時向下滾動
    2021-05-05
  • Vue cli3 庫模式搭建組件庫并發(fā)布到 npm的流程

    Vue cli3 庫模式搭建組件庫并發(fā)布到 npm的流程

    這篇文章主要介紹了Vue cli3 庫模式搭建組件庫并發(fā)布到 npm,以下一個簡單的顏色選擇器插件 vColorPicker 講述從開發(fā)到上線到npm的流程,需要的朋友可以參考下
    2018-10-10
  • vue2封裝input組件方式(輸入的雙向綁定)

    vue2封裝input組件方式(輸入的雙向綁定)

    這篇文章主要介紹了vue2封裝input組件方式(輸入的雙向綁定),具有很好的參考價值,希望對大家有所幫助。
    2023-04-04

最新評論