vite配置-整合SCSS

一款 CSS 预处理语言，SCSS 是 Sass 3 引入新的语法，其语法完全兼容 CSS3，并且继承了 Sass 的强大功能。

# 1. 安装依赖

npm i -D sass

# 2. 创建 variables.scss 变量文件

新建 src/styles/index.scss

添加变量 $bg-color 定义，注意规范变量以 $ 开头

// src/styles/variables.scss

$bg-color:#242424;

# 3. Vite 配置导入 SCSS 全局变量文件

配置 vite.config.ts

// vite.config.ts

css: {

    // CSS 预处理器

    preprocessorOptions: {

        // define global scss variable

        scss: {

            javascriptEnabled: true,

            additionalData: `@use "@/styles/variables.scss" as *;`

        }

    }

}

# 4. style 标签使用 SCSS 全局变量

<!-- src/components/HelloWorld.vue -->

<template>

  <div class="box" />

</template>

<style lang="scss" scoped>

.box {

  width: 100px;

  height: 100px;

  background-color: $bg-color;

}

</style>

# 5. TypeScript 生效

上面导入的 SCSS 全局变量在 TypeScript 不生效的，需要创建一个以 .module.scss 结尾的文件

// src/styles/variables.module.scss

// 导出 variables.scss 文件的变量

:export{

    bgColor:$bg-color

}

TypeScript 使用 SCSS 全局变量

<!-- src/components/HelloWorld.vue -->

<script setup lang="ts">

  import variables from "@/styles/variables.module.scss";

  console.log(variables.bgColor)  

</script>

<template>

  <div style="width:100px;height:100px" :style="{ 'background-color': variables.bgColor }" />

</template>