快捷導(dǎo)航

vue3安裝配置sass的詳細(xì)步驟

更新時(shí)間：2022年12月28日 09:15:30 作者：Jay丶千玨

sass是css的預(yù)處理器,擴(kuò)展了css語(yǔ)言,提供了規(guī)則、變量、混入、選擇器、繼承、內(nèi)置函數(shù)等特性,有助于減少CSS重復(fù)的代碼,節(jié)省開(kāi)發(fā)時(shí)間,下面這篇文章主要給大家介紹了關(guān)于vue3安裝配置sass的相關(guān)資料,需要的朋友可以參考下

前言：

對(duì)于前端開(kāi)發(fā)人員來(lái)說(shuō)，css預(yù)處理的語(yǔ)言已經(jīng)是家常便飯了，如sass，less等等，那么在vue3中該如何去使用sass呢?

首先看個(gè)最基礎(chǔ)的頁(yè)面，木有任何的樣式，接下來(lái)將一步一步的添加樣式！

<template>
  <div>
    123456
  </div>
</template>

1. 安裝sass

npm install sass

2. 新建style目錄，存放scss文件

項(xiàng)目src文件下，新建styles目錄，當(dāng)然位置自己隨意定，新建了這三個(gè)scss文件，下面我們對(duì)這三個(gè)文件進(jìn)行一一解析。

constant.scss：用于放置項(xiàng)目中的sass變量，比如主題顏色，大字體的字號(hào)，小字體的字號(hào)等等，這里只是用于測(cè)試

$color-red: #ff0000;
$large-size: 40px;
$font-oblique: oblique;

index.scss：用于放置項(xiàng)目中自己封裝的一些常用的樣式，class類名，比如flex布局，定位，字體等等，這個(gè)只寫(xiě)了一個(gè)

@import "./constant.scss";
 
.l-size {
  font-size: $large-size;
}

variables.module.scss：用于scss變量的導(dǎo)出，大部分用于vue文件中js中使用

@import "./constant.scss";
 
:export {
  fontOblique: $font-oblique;
}

3. main.ts

將我們封裝的公共的css樣式類名導(dǎo)入進(jìn)main.ts文件中，這樣在所有的vue文件中，就可以隨意使用這些樣式了

嘗試一下~.~

<template>
  <div class="l-size">
    123456
  </div>
</template>

4. vite.config.ts

主要用途是將我們的constant.scss中的scss常量加載到全局，這樣我們可以在style標(biāo)簽中，隨意使用這些scss常量

import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path';
 
// https://vitejs.dev/config/
export default defineConfig({
    plugins: [vue()],
    resolve: {
        // Vite路徑別名配置
        alias: {
            '@': path.resolve('./src')
        }
    },
    /*主要看下面這段*/
    css: {
        preprocessorOptions: {
            scss: {
                additionalData: '@import "@/styles/constant.scss";'
            }
        }
    }
})

嘗試一下~.~

<template>
  <div class="l-size content">
    123456
  </div>
</template>
 
<style lang="scss" scoped>
.content {
  color: $color-red;
}
</style>

5. Test.vue

接下來(lái)，我們將 variables.module.scss中的變量導(dǎo)入到當(dāng)前的vue文件中。

<script lang="ts" setup>
import variables from "@/styles/variables.module.scss"
 
console.log(variables)
</script>

于是我們可以這么寫(xiě)

<template>
  <div class="l-size content" :style="{fontStyle:variables.fontOblique}">
    123456
  </div>
</template>
 
<script setup lang="ts">
import variables from "../styles/variables.module.scss"
 
console.log(variables)
</script>
 
<style lang="scss" scoped>
.content {
  color: $color-red;
}
</style>

或者利用computed

<template>
  <div class="l-size content" :style="getStyle">
    123456
  </div>
</template>
 
<script setup lang="ts">
import {computed} from "vue"
import variables from "../styles/variables.module.scss"
 
const getStyle = computed(() => ({fontStyle: variables.fontOblique}))
</script>
 
<style lang="scss" scoped>
.content {
  color: $color-red;
}
</style>