Vue3集成sass

安装依赖

bash 复制代码
pnpm add -D sass-embedded

配置全局变量

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

variables.scss

sass 复制代码
$base-color: blue

vite.config.ts

tsx 复制代码
// 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.scsssrc/assets/styles/index.scss
  • 引入全局样式 main.ts

reset.scss

sass 复制代码
// 重置样式 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

sass 复制代码
// 引入重置样式
@use 'reset';

main.ts

tsx 复制代码
...
const app = createApp(App)
...
// 引入全局样式
import '@/assets/styles/index.scss'

app.mount('#app')

使用测试

html 复制代码
<template>
  <div class="home">
    <h2>Home</h2>    
  </div>
</template>

<script setup lang="ts">
</script>

<style scoped lang="scss">
.home {
  h2 {
    color: $base-color;
  }
}
</style>
相关推荐
阴阳怪气乌托邦几秒前
别再啃OA代码了!低代码"搭积木"式搞数智化,我直接少写500行
前端·低代码
beelan5 分钟前
v-on的思考
前端
山河木马8 分钟前
前端学习C++之:.h(.hpp)与.cpp文件
前端·javascript·c++
用户9272472502198 分钟前
PHP + CSS + JS + JSON 数据采集与展示系统,支持伪静态
前端
努力只为躺平12 分钟前
一文搞懂 Promise 并发控制:批量执行 vs 最大并发数,实用场景全解析!
前端·javascript
李大玄14 分钟前
Google浏览器拓展工具 "GU"->google Utils
前端·javascript·github
爱编程的喵14 分钟前
从DOM0到事件委托:揭秘JavaScript事件机制的性能密码
前端·javascript·dom
蓝倾20 分钟前
京东批量获取商品SKU操作指南
前端·后端·api
JSLove27 分钟前
常见 npm 报错问题
前端·npm
sunbyte27 分钟前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | ContentPlaceholder(背景占位)
前端·javascript·css·vue.js·tailwindcss