安装 Sass


    步骤 1:安装 Sass

    为了在您的项目中使用 sass,首先需要安装 sass。请在终端运行以下命令来添加 sass 作为开发依赖:

    1pnpm add -D sass

    步骤 2:创建 sass 变量

    common/assets/styles 目录下新建 variable.scss 文件,并定义您的 sass 变量:

    1$primary-color: green;

    步骤 3:配置构建工具

    接下来,配置你的 vite.config.ts 文件,以支持全局 sass 变量的使用:

    1import { fileURLToPath, URL } from "node:url"
    2import vue from "@vitejs/plugin-vue"
    3import AutoImport from "unplugin-auto-import/vite"
    4import Components from "unplugin-vue-components/vite"
    5import { ElementPlusResolver } from "unplugin-vue-components/resolvers"
    6import { defineConfig } from "vite"
    7
    8// https://vite.dev/config/
    9export default defineConfig({
    10	resolve: {
    11		alias: {
    12			"@": fileURLToPath(new URL("./src", import.meta.url)),
    13		},
    14	},
    15	css: { // [!code focus]// [!code ++]
    16		preprocessorOptions: { // [!code focus]// [!code ++]
    17			scss: { // [!code focus]// [!code ++]
    18				additionalData: `@use "@/common/assets/styles/variable.scss" as *;`, // [!code focus]// [!code ++]
    19			}, // [!code focus]// [!code ++]
    20		}, // [!code focus]// [!code ++]
    21	}, // [!code focus]// [!code ++]
    22	plugins: [
    23		vue(),
    24		AutoImport({
    25			resolvers: [ElementPlusResolver()],
    26		}),
    27		Components({
    28			resolvers: [ElementPlusResolver()],
    29		}),
    30	],
    31})

    步骤 4:使用 sass 变量

    现在,你可以在项目中轻松使用全局 sass 变量了:

    1.button {
    2  background-color: $primary-color;
    3}

    通过这些步骤,您可以在 Vue 项目中成功安装并使用 sass,同时利用全局变量来统一管理样式。