一般放在 style 中 引入设置 lang = ‘scss’，并配置好 对应的 loader

安装scss依赖包：
npm install sass-loader --save-dev npm install node-sass --save-dev
在build文件夹下修改 webpack.base.conf.js 文件：
在 module 下的 rules 里添加配置，如下：
{ test: /\.scss$/, loaders: ['style', 'css', 'sass'] }
应用：
在vue文件中应用scss时，需要在style样式标签上添加lang="scss"，即<style lang="scss">。

1、安装scss依赖包
2、在 webpack下配置好对应的loader
3、在style样式标签上添加lang="scss"，即<style lang="scss">。

安装依赖

在项目中安装node-sass和sass-loader两个依赖，用于编译和加载SCSS文件。

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

配置Webpack

在项目的Webpack配置文件（如vue.config.js或webpack.config.js）中，添加对SCSS的支持。

// vue.config.js
module.exports = {
  // ...
  css: {
    loaderOptions: {
      sass: {
        additionalData: `@import "@/styles/variables.scss";`
      }
    }
  }
};

在上述配置中，通过additionalData选项指定了一个全局的SCSS文件，可以在其中定义全局的变量、混合等。

创建SCSS文件

在项目中创建一个SCSS文件，例如variables.scss，用于定义样式变量。

// variables.scss
$primary-color: #ff0000;

在组件中使用：

在需要使用SCSS样式的组件中，可以通过<style>标签引入SCSS文件。

<style lang="scss">
.component {
  background-color: $primary-color;
}
</style>

上述示例中，使用了定义在variables.scss中的$primary-color变量。

通过以上步骤，就可以在Vue项目中成功引入和使用SCSS样式。在SCSS文件中可以定义变量、嵌套样式、混合等，然后在组件的样式中使用它们。Webpack会在构建过程中将SCSS文件编译为CSS，并将其应用于组件的样式中。