1️⃣ cli 创建项目

2️⃣ 使用 scss

安装如下包

npm install node-sass@4.14.1 --save-dev
npm install sass-loader@8.0.2 --save-dev
npm install node-sass@4 sass-loader@8 --save-dev

在样式中使用

<template>
  <div id="app">
    <h1>App</h1>
  </div>
</template>
<script>
export default {};
</script>
<style lang="scss" scoped>
  @mixin color {
    color: #ccc;
  }
  h1 {
    @include color;
  }
</style>

2️⃣ 配置全局 scss

vue.config.js 中配置

// vue.config.js
module.exports = {
  css: {
    loaderOptions: {
      /**
       * 给 sass-loader 传递选项
       * @/ 是 src/ 的别名
       * 所以这里假设你有 `src/styles` 这个文件夹, 文件夹里有 scss 文件, 分别为
       *    variables.scss 全局遍历 scss 文件
       *    mixins.scss 全局混合 scss 文件
       *    global.scss 全局样式 scss 文件
       * 注意：sass-loader 不同的版本有不同的配置名称
       *    sass-loader v8-  (这个选项名是 "data")
       *    sass-loader v8中 (这个选项名是 "prependData")
       *    sass-loader v10+ (这个选项名是 "additionalData")
       * 这里我们的版本是 "sass-loader": "^8.0.2" 所以使用 "prependData" 配置
       */
      scss: {
        prependData: `
        @import '@/styles/variables.scss';
        @import '@/styles/mixins.scss';
        @import '@/styles/global.scss';
        `,
      },
    },
  },
};

组件中使用

<template>
  <div id="app">
    <h1 class="variables">variables</h1>
    <h1 class="mixins">mixins</h1>
    <h1 class="global">global</h1>
  </div>
</template>
<script>
export default {};
</script>
<style lang="scss">
  .variables {
    color: $color;
  }
  .mixins {
    @include color;
  }
</style>

1️⃣ vite 创建项目

2️⃣ 使用 scss

以前用 vue-cli 的时候，还要安装 sass-loader、node-sass 什么的，安装的时候还会遇到各种问题，但是 vite 其实安装 sass 就可以了，很简单

npm install --save-dev sass

2️⃣ 创建全局 scss

import { defineConfig } from "vite";
import { resolve } from "path";
import vue from "@vitejs/plugin-vue";
// https://vitejs.dev/config/
export default defineConfig({
    plugins: [vue()],
    resolve: {
        alias: [{ find: "@", replacement: resolve(__dirname, "src") }],
    },
    css: {
        preprocessorOptions: {
            scss: {
                additionalData: '@import "@/common/global.scss";',
            },
        },
    },
});