vue3 安装使用 scss

要在Vue 3项目中使用SCSS，您需要进行以下步骤：

1. 首先，确保您已经安装了Vue CLI。如果没有安装，请使用以下命令进行安装：

   npm install -g @vue/cli

2. 创建一个新的Vue项目。使用以下命令：

   vue create my-project

在创建项目的过程中，您可以选择自定义设置，确保选择 SCSS 作为预处理器。

3. 进入到您的项目目录中：

   cd my-project

4. 安装 `sass` 和 `sass-loader`。这两个包是用于处理SCSS的依赖项。使用以下命令进行安装：

   npm install sass sass-loader

5. 打开项目中的 `vue.config.js` 文件（如果没有则创建一个）。

6. 在 `vue.config.js` 文件中，添加以下代码来配置SCSS预处理器：

   module.exports = {
     css: {
       loaderOptions: {
         sass: {
           additionalData: `@import "@/assets/styles/main.scss";`
         }
       }
     }
   }

这将告诉Vue在每个组件中使用SCSS时自动导入 `main.scss` 文件。

7. 创建一个名为 `main.scss` 的文件（或者您可以选择其他名称），并将其放入 `src/assets/styles/` 目录中。

8. 现在，您可以在您的组件中使用SCSS了。只需在组件的 `<style>` 块中使用SCSS语法编写样式即可。

这样，您就可以在Vue 3项目中使用SCSS了！记得重启开发服务器以使更改生效。