安裝依賴
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，用于打包時路徑轉換},},css: {preprocessorOptions: {// 引入公共scss變量scss: {// 引入 varibles.scss 這樣就可以在全局中使用 varibles.scss中預定義的變量了// 給導入的路徑最后加上 ;// as 后面是定義的環境變量// 如果寫as * ，可以直接使用變量名，如：變量名// 如果不寫as *, 默認文件名即：variables, 使用variables.變量名// 如果是as vars，則使用vars.變量名additionalData: '@use "@/assets/styles/variables" as *;',},},},
})
引入全局樣式
- 創建文件
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>
)
)
