1. 安装依赖

安装sass和sass-loader包：

npm i sass sass-loader

2. 頁面使用

lang="scss"

<style scoped lang="scss">
.header{
  .top-button {
    //样式代码
  }
}
</style>

3. 添加全局样式

• 在src/styles目录下创建一个index.scss文件。

• 在src/styles目录下创建一个reset.scss文件。

  进入npm官网，搜索reset.scss，拷贝对应的代码到src/styles/reset.scss文件中

• index.scss引入reset.scss

  @import 'reset.scss' ;
  

4. Sass全局配置

在main.ts入口文件引入

//引入模板的全局的样式
import '@/styles/index.scss'

vite.config.ts文件配置變量

export default defineConfig({
  // scss 全局变量的配置
  css: {
    preprocessorOptions: {
      scss: {
        javascriptEnabled: true,
        additionalData: '@import "./src/styles/variable.scss";',
      },
    },
  },
})

    css: {
      preprocessorOptions: {
        scss: {
          javascriptEnabled: true,
          additionalData: `@use "~/styles/element/index.scss" as *;'
        }
      }
    },

在src/styles下创建一个variable.scss文件

$color: red;

頁面就可以使用啦

<style scoped lang="scss">
div{
  h1 {
    color: $color;
  }
}
</style>

5. 深度修改

遇到這種第三方樣式，必須深度修改

:deep(tr[class="el-table__row"]){
  td{
    .cell{
      white-space: pre-line;
    }
  }
}