从入门到精通：Vite+Vue3项目全局引入SCSS

2022-11-08 07:43:01

在 Vite + Vue 3 项目中使用 SCSS

简介

在快速发展的互联网时代，构建网站和应用程序需要高效的工具和技术。Vite 和 Vue 3 是两款出色的框架，它们可以帮助你快速轻松地创建响应式且美观的应用程序。但是，如果你希望在项目中使用 SCSS（一种强大的 CSS 预处理器），可能需要额外的配置才能将其全局引入。

本指南将逐步指导你在 Vite + Vue 3 项目中全局引入 SCSS，让你能够充分利用 SCSS 的强大功能。我们将涵盖安装 SCSS、配置 Vite、在 Vue 3 项目中使用 SCSS，以及提供一些有用的技巧和最佳实践。

安装 SCSS

首先，你需要在项目中安装 SCSS。通过在终端中运行以下命令即可实现：

npm install sass

配置 Vite

接下来，需要在 Vite 中配置 SCSS。在项目目录下的 vite.config.js 文件中添加以下配置：

// vite.config.js
import { defineConfig } from 'vite'
import sass from 'sass'

export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `
          @import "~/styles/variables.scss";
          @import "~/styles/mixins.scss";
        `
      }
    }
  }
})

在 Vue 3 项目中使用 SCSS

现在，你可以开始在 Vue 3 项目中使用 SCSS 了。在组件文件中导入 SCSS 文件即可：

// MyComponent.vue
<template>
  <div class="my-component">
    <h1>Hello World!</h1>
  </div>
</template>

<script>
import './styles.scss'

export default {
  // ...
}
</script>