vue安装sass

# 安装 Node.js 和 npm（如果尚未安装）

# 初始化 Vue 项目（如果尚未创建）
vue create my-project
cd my-project

# 安装 sass-loader 和 node-sass（或 dart-sass）
npm install sass-loader sass --save-dev

# 或者使用 yarn
# yarn add sass-loader sass --dev

# 在 vue.config.js 中配置 sass（如果需要全局引入）
# 创建或编辑 vue.config.js 文件
module.exports = {
  css: {
    loaderOptions: {
      sass: {
        // 这里可以添加全局的 sass 变量、mixin 等
        additionalData: `@import "@/styles/_variables.scss";`
      }
    }
  }
}

# 在组件中使用 .scss 文件
<template>
  <div class="example">Hello World</div>
</template>

<script>
export default {
  name: 'ExampleComponent'
}
</script>

<style lang="scss">
.example {
  color: $primary-color; // 假设在 _variables.scss 中定义了 $primary-color
}
</style>

解释说明：

1. 安装依赖：首先确保你已经安装了 Node.js 和 npm。然后通过 vue create 创建一个新的 Vue 项目，或者进入已有的项目目录。
2. 安装 sass-loader 和 sass：使用 npm 或 yarn 安装 sass-loader 和 sass（或 node-sass）。sass-loader 是 Webpack 的加载器，用于处理 .scss 文件，而 sass 是编译器。
3. 配置 vue.config.js：如果你希望在项目中全局引入一些 Sass 变量或 mixin，可以在 vue.config.js 中进行配置。这里我们通过 additionalData 选项引入了一个全局的 _variables.scss 文件。
4. 在组件中使用 SCSS：在 Vue 组件中，可以通过 <style lang="scss"> 标签来编写 SCSS 代码，并引用全局定义的变量。

这样设置后，你就可以在 Vue 项目中顺利使用 Sass 了。