vue3安装配置sass的详细步骤

请按照以下步骤来安装配置Sass：

安装Vue CLI

Vue CLI是一个官方提供的基于webpack的脚手架。在项目中使用它可以帮助我们自动化构建、配置开发环境和打包等等。下面是安装Vue CLI的命令：

npm install -g @vue/cli

创建Vue 3工程

执行以下命令以创建一个新的 Vue 工程：

vue create my-project

其中，my-project是你的项目名称，请自行替换。根据提示，选择手动配置并选择 features 选项中的 [ ] Sass/SCSS（with dart-sass）选项。

安装sass依赖

打开终端，进入到项目工程目录并执行以下命令：

cd my-project
npm install sass-loader@^10.0.0 sass -D

sass-loader用于解析sass文件，sass是最新的Dart Sass编译器，可以处理Sass的语法。

配置vue.config.js

在项目根目录下创建vue.config.js文件，并进行如下配置：

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        implementation: require('sass')
      }
    }
  }
}

在sass属性里指定了require('sass')，这表明配置的Sass解析器是最新的Dart Sass编译器。

在vue组件中使用Sass

在Vue组件中使用Sass很简单，只需要在style标签中声明语言类型为 scss，然后就可以使用Sass语法编写样式了。例如：

<template>
  <div class="wrapper">
    <p>{{ message }}</p>
  </div>
</template>

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

<style lang="scss">
.wrapper {
  padding: 20px;
  background-color: #f5f5f5;

  p {
    color: red;
  }
}
</style>

以上就是 Vue 3 中如何安装配置 Sass 的详细步骤。

示例1：Vue3项目中安装Sass并使用全局样式

// 在main.js中引入全局sass文件
import "@/scss/global.scss"

// global.scss中定义全局样式
$primary-color: #409EFF;

body {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  background-color: #f5f5f5;
  color: $primary-color;
}

示例2：Vue3组件中安装Sass并使用局部样式

<template>
  <div class="wrapper">
    <p>{{ message }}</p>
  </div>
</template>

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

<style lang="scss" scoped>
.wrapper {
  padding: 20px;
  background-color: #f5f5f5;

  p {
    color: $primary-color;
  }
}
</style>

声明scoped属性后，Sass样式仅在该组件中生效。同时，需要在data函数中声明变量$primary-color，用于在该组件中使用。这样定义的样式仅在该组件中生效，不会影响到全局。