Vue.js 使用sass

在本文中，我们将介绍如何在Vue.js项目中使用sass，并结合Vite构建工具进行开发。

准备工作

在开始使用sass之前，我们需要确保已经安装了Vue.js和Vite。可以通过以下命令来进行安装：

# 全局安装Vue CLI
npm install -g @vue/cli

# 创建Vue项目
vue create my-project
cd my-project

# 安装Vite
npm init vite@latest

安装完成后，我们可以选用默认配置或者根据需要进行自定义配置。

安装sass

在已有的Vue项目中，我们需要安装对应的sass依赖。可以通过以下命令进行安装：

# 使用npm
npm install sass --save-dev

# 使用yarn
yarn add sass --dev

安装完成后，我们可以在项目的src目录下创建sass文件夹，并在其中编写sass样式。

配置Vite

为了能够在Vite中正确使用sass，我们需要对vite.config.js文件进行调整。

// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  css: {
    preprocessorOptions: {
      sass: {
        additionalData: `@import "./src/sass/variables.scss";`
      }
    }
  }
})

以上配置中，我们通过additionalData选项引入了sass/variables.scss文件，以便在项目中全局使用sass变量。

在组件中使用sass

在Vue组件中使用sass非常简单。在style标签中，我们只需要将lang属性设置为sass即可开始编写sass样式。

<template>
  <div class="my-component">
    <h1>{{ message }}</h1>
  </div>
</template>

<style lang="sass">
.my-component
  h1
    font-size: 16px
    color: $primary-color
</style>

<script>
export default {
  data() {
    return {
      message: 'Hello Vue!'
    }
  }
}
</script>

在上面的例子中，我们给h1标签设置了样式，其中使用到了变量$primary-color，这个变量是在全局的sass/variables.scss中定义的。

自定义sass配置

有时候，我们可能需要对sass的配置进行一些自定义，比如修改变量的默认值或者引用额外的sass库。

为了实现这样的需求，我们可以在项目根目录下创建一个名为sass的文件夹，并在其中添加sass.config.js文件。该文件会覆盖Vite的默认配置。

// sass/sass.config.js
module.exports = {
  additionalData: `@import "@/sass/variables.scss";
                    @import "@/sass/mixins.scss";`
}

在上面的例子中，我们引入了sass/variables.scss和sass/mixins.scss两个文件，并将其作为全局样式导入。

总结

在本文中，我们介绍了如何在Vue.js项目中使用sass，并结合Vite进行开发。通过安装sass依赖，配置Vite，以及在组件中使用sass语法，我们可以轻松地编写样式，并使用sass的高级功能。同时，我们还探讨了如何自定义sass配置，以满足特定的项目需求。希望本文对你在Vue.js项目中使用sass有所帮助！