Vue3 Scss的使用(一)

最新推荐文章于 2025-06-24 14:24:29 发布

原创

最新推荐文章于 2025-06-24 14:24:29 发布 · 720 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#scss #前端 #css

最近因为工作原因阅读了ElementPlus和Vexip UI开源框架的源代码，发现这两个框架的style样式都是用的scss，今天进行了scss系统性的研究学习。

安装


// 使用vue3+vite的环境

npm install sass -S

使用

一个小栗子，全局scss中的变量的使用

export default defineConfig({
	css: {
      // css预处理器
      preprocessorOptions: {
        scss: {
          additionalData: '@import "./src/assets/css/global.scss";',
        }
      },
    },
})

// 配置一个全局主色调
$color-main: rgb(70, 227, 238)

<template>
  <div class="box">
    <div>使用全局的scss变量，设置子组件div的背景颜色为全局的color-main</div>
  </div>
</template>
<script setup>
</script>
<style scoped lang="scss">
.box{
  display: flex;
  flex-direction: column;