Vue2.x如何安裝并使用SCSS

這篇文章給大家分享的是有關(guān)Vue2.x如何安裝并使用SCSS的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

 一、什么是SCSS

SCSS是成熟、穩(wěn)定、強大的CSS預(yù)處理器，而SCSS是Sass3版本當(dāng)中引入的新語法特性，完全兼容CSS3的同時繼承了Sass強大的動態(tài)功能。

二、SCSS與CSS的區(qū)別

• SCSS代表Sassy CSS。與Sass不同，SCSS并非基于縮進。

• .sass擴展名用作Sass的原始語法，而SCSS通過.scss擴展名提供更新的語法。

• 與Sass不同，SCSS與CSS一樣具有花括號和分號。

• 與SCSS相反，Sass很難閱讀，因為它與CSS截然不同。這就是為什么SCSS成為更推薦的Sass語法的原因，因為它更易于閱讀，并且與Native CSS非常相似，同時又享受了Sass的強大功能。

SCSS更加優(yōu)秀！

三、Vue中安裝SCSS

建議在cmd窗口安裝并使用管理員方式打開

??安裝SCSS

使用阿里云服務(wù)器下載依賴，在國內(nèi)下載會比npm外網(wǎng)下載依賴快一些

cnpm i -D node-sass sass-loader

//vue2.5.2需要降級安裝 
cnpm i -D node-sass@4.14.1 sass-loader@7.3.1

??運行項目進行測試

輸入以下命令運行項目

npm run dev

運行成功~

四、項目中使用SCSS

在vue文件中指定樣式語言為scss

vue代碼

<template>
  <div class="box-container1">
      <el-button type="primary" @click="m1">普通</el-button>
      <span class="span1">Yes</span>
  </div>
</template>

到此完美使用SCSS~

補充：全局引用scss

先安裝這個插件來進行全局引用scss

npm install sass-resources-loader --save-dev

然后修改build文件夾中的utils.js文件

將

 scss: generateLoaders('sass'),

改為

scss: generateLoaders('sass').concat(
  {
    loader: 'sass-resources-loader',
    options: {
      resources: path.resolve(__dirname, '../src/assets/index.scss')//這里改為自己的index.scss文件路徑
    }
  }
)

項目里每個組件都可以直接用base.scss文件內(nèi)的變量及樣式了。記得style內(nèi)加上lang=“scss”

<style scoped lang="scss">

?SCSS常用命令

SCSS官方文檔

常用命令

• 混合樣式：@mixin 名字(參數(shù)1，參數(shù)2…){…}

• 取用混合樣式：@include 名字（@mixin的名字）

• 繼承樣式：@extend 需要繼承的類、ID名、自定義的混合樣式等的名字

• 導(dǎo)入scss樣式：@import "scss文件名"

• 條件控制指令：@if 條件{…}
  循環(huán)控制指令：

• @for $var from <開始值> through <結(jié)束值> -----------包括結(jié)束值

• @for $var from <開始值> to <結(jié)束值> ------------不包括結(jié)束值

• 循環(huán)List項目的控制指令：@each $var in $List{}

• 條件判斷循環(huán)：@while 條件{&hellip;}

• 用戶自定義的函數(shù)：@function 名稱(參數(shù)1，參數(shù)2&hellip;){&hellip;}
  警告和錯誤的提示：

• @warn “&hellip;”------------------------在終端輸出警告

• @error “&hellip;”----------------在.css文件和終端輸出錯誤

感謝各位的閱讀！關(guān)于“Vue2.x如何安裝并使用SCSS”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！