Vue2和Vue3中的Sass使用

给大家介绍一下sass相关的操作。Sass (Syntactically Awesome Style Sheets)是一种流行的预处理器脚本语言，用于扩展CSS的功能。它提供了许多功能，使编写和维护CSS代码更加容易。在本文中，我们将讨论如何在Vue2和Vue3版本中使用Sass。

作为前端开发，经常接手项目安装依赖时出问题，我先来列举一下对应关系。对应以下是 node-sass、sass-loader 和 Node.js 的对应版本：

Sass 工具	支持的 Node.js 版本	支持的 sass-loader 版本
node-sass	0.10.x - 6.x	^4.0.0, ^7.0.0
sass	8.x.x - latest	^11.0.0
sass-loader	3.x.x - 12.x.x	6.0.0 - latest
Node.js	8.x.x - latest	-

Vue2中的Sass

Vue2提供了Sass的内置支持。在Vue2中使用Sass有两种方法：

1. 全局使用

要在Vue2中全局使用Sass，请使用以下命令安装sass-loader和node-sass包：

npm install sass-loader node-sass --save-dev

安装这些包后，在项目的根目录中创建一个名为vue.config.js的文件，并添加以下代码：

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        data: `@import "@/styles/main.scss";`
      }
    }
  }
};
//由于sass-loader的版本不同，不同的版本对应的关键字：  
//sass-loader v8-中，关键字为 “ data ”  
//sass-loader v8中，关键字为 “ prependData ”  
//sass-loader v10+中，关键字为 “ additionalData ”

这个代码将把main.scss文件导入到你Vue2项目的所有组件中。

2. 作用域使用

你还可以通过将以下代码添加到组件中，在Vue2中按照组件使用Sass：

<template>
  <div class="demo-component">
    <!-- Component HTML code here -->
  </div>
</template>

<script>
export default {
  // Component configuration options
};

<style lang="scss" scoped>
.demo-component {
  // Sass code for the component
}
</style>

在这里，我们使用scoped属性，将我们的Sass代码应用于组件的HTML元素。

Vue3中的Sass

Vue3也提供了对Sass的内置支持。你可以像在Vue2中使用Sass一样在Vue3中使用Sass，但有一些不同之处。

1. 全局使用

要在Vue3中全局使用Sass，请使用以下命令安装sass和sass-loader包：

npm install sass sass-loader --save-dev

安装这些包后，在项目的根目录中创建一个名为vite.config.js的文件，并添加以下代码：

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [vue()],
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import '@/styles/main.scss';`
      }
    }
  }
});

这个代码将把main.scss文件导入到你Vue3项目的所有组件中。

2. 作用域使用

在Vue3中，scoped属性已被module属性替换。你可以通过将以下代码添加到组件中，在Vue3中按照组件使用Sass：

<template>
  <div class="demo-component">
    <!-- Component HTML code here -->
  </div>
</template>

<script>
export default {
  // Component configuration options
};

<style lang="scss" module>
.demo-component {
  // Sass code for the component
}
</style>

在这里，我们使用module属性，将我们的Sass代码应用于组件的HTML元素。