webpack配置的vue安装scss

要在Vue项目中使用SCSS，需要安装以下依赖：

1. `sass-loader`：将SCSS代码转换为CSS代码的加载器。
2. `node-sass`：Sass的Node.js绑定，用于将SCSS文件编译为CSS文件。
3. `style-loader`：将CSS代码转换为JavaScript代码并注入到HTML页面中的加载器。
4. `css-loader`：解析CSS文件，处理import和url()等语法，并将CSS代码转换为JavaScript代码的加载器。

安装命令如下：

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

安装完成后，在Webpack配置文件中添加以下代码：

module.exports = {
  module: {
    rules: [
      // 处理SCSS文件
      {
        test: /\.scss$/,
        use: [
          'style-loader',
          'css-loader',
          'sass-loader'
        ]
      }
    ]
  }
}

这将会告诉Webpack如何处理SCSS文件，并将其转换为CSS代码。现在，在Vue组件中就可以使用SCSS了：

<template>
  <div class="example">
    <h1>Hello World</h1>
  </div>
</template>

<script>
export default {
  name: 'Example',
}
</script>

<style lang="scss">
.example {
  h1 {
    font-size: 24px;
    color: red;
  }
}
</style>