vue3安裝配置sass的詳細步驟
前言：
對于前端開發(fā)人員來說，css預處理的語言已經(jīng)是家常便飯了，如sass，less等等，那么在vue3中該如何去使用sass呢?
首先看個最基礎的頁面，木有任何的樣式，接下來將一步一步的添加樣式！
<template>
<div>
123456
</div>
</template>
1. 安裝sass
npm install sass
2. 新建style目錄，存放scss文件
項目src文件下，新建styles目錄，當然位置自己隨意定，新建了這三個scss文件，下面我們對這三個文件進行一一解析。
constant.scss：用于放置項目中的sass變量，比如主題顏色，大字體的字號，小字體的字號等等，這里只是用于測試
$color-red: #ff0000; $large-size: 40px; $font-oblique: oblique;
index.scss：用于放置項目中自己封裝的一些常用的樣式，class類名，比如flex布局，定位，字體等等，這個只寫了一個
@import "./constant.scss";
.l-size {
font-size: $large-size;
}variables.module.scss：用于scss變量的導出，大部分用于vue文件中js中使用
@import "./constant.scss";
:export {
fontOblique: $font-oblique;
}3. main.ts
將我們封裝的公共的css樣式類名導入進main.ts文件中，這樣在所有的vue文件中，就可以隨意使用這些樣式了
嘗試一下~.~
<template>
<div class="l-size">
123456
</div>
</template>
4. vite.config.ts
主要用途是將我們的constant.scss中的scss常量加載到全局，這樣我們可以在style標簽中，隨意使用這些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
接下來，我們將 variables.module.scss中的變量導入到當前的vue文件中。
<script lang="ts" setup> import variables from "@/styles/variables.module.scss" console.log(variables) </script>
于是我們可以這么寫
<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>
如此這樣~.~！
總結(jié)
到此這篇關于vue3安裝配置sass的文章就介紹到這了,更多相關vue3安裝配置sass內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要給大家介紹了關于前端vuex中dispatch使用方法的相關資料,vuex的dispatch方法用于觸發(fā)一個action,以便更新state,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-04-04
這篇文章主要介紹了vue仿攜程輪播圖效果（滑動輪播,下方高度自適應）,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-02-02
這篇文章主要介紹了vue如何實現(xiàn)二進制流文件導出excel，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-06-06
這篇文章主要為大家詳細介紹了Vue實現(xiàn)拖拽功能，拖動方塊進行移動，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-04-04
這篇文章主要給大家介紹了關于vue實現(xiàn)簡易計算器的4種方法,文中通過代碼介紹的非常詳細,對大家學習或者使用vue覺有一定的參考借鑒價值,需要的朋友可以參考下2023-09-09
Vue實現(xiàn)下拉滾動加載數(shù)據(jù)的示例
這篇文章主要介紹了Vue實現(xiàn)下拉滾動加載數(shù)據(jù)的示例，幫助大家更好的理解和學習使用vue框架，感興趣的朋友可以了解下2021-04-04
vue頁面渲染數(shù)組中數(shù)據(jù)文案后添加逗號最后不加
這篇文章主要為大家介紹了vue頁面渲染數(shù)組中數(shù)據(jù)文案后添加逗號最后不加逗號示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-08-08
vueCli?4.x升級5.x報錯:Progress?Plugin?Invalid?Options的解決方法
本文主要介紹了vueCli?4.x升級5.x報錯:Progress?Plugin?Invalid?Options的解決方法,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2024-01-01
Vuejs仿網(wǎng)易云音樂實現(xiàn)聽歌及搜索功能
這篇文章主要介紹了Vuejs仿網(wǎng)易云音樂實現(xiàn)聽歌及搜索功能,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2017-03-03
Vue 本身以及周邊生態(tài)在設計語法糖上幾乎沒讓我失望過,包括本次亮相的 Vue Vine,它的出現(xiàn)引起了我對 Vue3 組件編寫方式的好奇,以及哪一種方式更接近「最佳實踐」？下面讓我來為大家一一道來2024-07-07