快捷導(dǎo)航

Vue3集成sass的詳細(xì)過程

更新時間：2025年04月24日 09:21:00 作者：碼農(nóng)張3

這篇文章主要介紹了Vue3集成sass的詳細(xì)過程,本文通過實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧

安裝依賴

pnpm add -D sass-embedded

配置全局變量

新建文件 src/styles/variables.scss
配置Vite 修改 vite.config.ts

variables.scss

$base-color: blue

vite.config.ts

// https://vite.dev/config/
export default defineConfig({
  plugins: [
    vue(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)) //相對路徑別名配置，@代替src，用于打包時路徑轉(zhuǎn)換
    },
  },
  css: {
    preprocessorOptions: {
      // 引入公共scss變量
      scss: {
        // 引入 varibles.scss 這樣就可以在全局中使用 varibles.scss中預(yù)定義的變量了
        // 給導(dǎo)入的路徑最后加上 ;
        // as 后面是定義的環(huán)境變量
        //   如果寫as * ，可以直接使用變量名，如：變量名
        //   如果不寫as *, 默認(rèn)文件名即：variables, 使用variables.變量名
        //   如果是as vars，則使用vars.變量名
        additionalData: '@use "@/assets/styles/variables" as *;',
      },
    },
  },
})

引入全局樣式

創(chuàng)建文件 src/assets/styles/reset.scss ，src/assets/styles/index.scss
引入全局樣式 main.ts

reset.scss

// 重置樣式 https://www.npmjs.com/package/reset.css?activeTab=code
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}
body {
  line-height: 1;
}
ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

index.scss

// 引入重置樣式
@use 'reset';

main.ts

...
const app = createApp(App)
...
// 引入全局樣式
import '@/assets/styles/index.scss'
app.mount('#app')

使用測試

<template>
  <div class="home">
    <h2>Home</h2>    
  </div>
</template>
<script setup lang="ts">
</script>
<style scoped lang="scss">
.home {
  h2 {
    color: $base-color;
  }
}
</style>

到此這篇關(guān)于Vue3集成sass的文章就介紹到這了,更多相關(guān)Vue集成sass內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: