VUE3项目--集成Sass

项目中集成Sass后，在组件内部就可以使用sass样式，需要加上lang="scss"。

一、安装Sass

pnpm install sass（或者sass-embedded） sass-loader -D

二、添加全局样式

1. src文件夹下新建文件/styles/index.scss
2. 在src/styles下文件文件reset.scss，目的是清除默认样式。复制npm官网的reset.scss文件内容到该文件中。
3. 在index.scss中引入reset.scss文件。

@use './reset.scss';

4. 在src/styles下文件文件variable.scss，目的是定义全局样式变量。变量名称以$开头。

// variable.scss

$color: red;
$base-size: 10

5. 在入口文件main.ts中导入样式文件。

// main.ts

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

6. 在vite.config.ts文件中配置scss。

// vite.config.ts

export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: '@use "@/styles/variable" as *;'
      }
    }
  }
})

三、使用全局样式

上面定义了两个全局样式 $c\; o\; l\; o\; r\; 、\; color、$color、base-size，直接在组件中使用即可。

<style scoped lang="scss">
div {
  h1 {
    // 使用全局样式变量$color
    color: $color;
  }
}
</style>