vue2和vue3中sass的使用

Sass (Syntactically Awesome Style Sheets)是一种流行的预处理器脚本语言，用于扩展CSS的功能。它提供了许多功能，使编写和维护CSS代码更加容易。我们将讨论如何在Vue2和Vue3版本中使用Sass。
一.Vue2中使用Sass有两种方法：
1.全局使用
1.1要在Vue2中全局使用Sass，使用以下命令安装sass-loader和node-sass包：npm install sass-loader node-sass --save-dev
1.2安装这些包后，在项目的根目录中创建一个名为vue.config.js的文件，并添加以下代码：
module.exports = {
css: {

loaderOptions: {
  sass: {
    data: `@import "@/styles/main.scss";`
  }
}

}
};
代码将把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的内置支持,可以像在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元素