项目中集成Sass后，在组件内部就可以使用sass样式，需要加上lang="scss"。
一、安装Sass
pnpm install sass（或者sass-embedded） sass-loader -D
二、添加全局样式
1、消除默认样式
有三种方法消除CSS默认样式。
1.1 使用经典的CSS RESET（简单粗暴）
这种方法的目标是移除几乎浏览器所有的默认样式（边距、填充、列表符号等），让你完全掌控。
-
src文件夹下新建文件/styles/index.scss
-
在src/styles下文件文件reset.scss，目的是清除默认样式。复制npm官网的reset.scss文件内容到该文件中。
-
在index.scss中引入reset.scss文件，放在文件最顶部。
// styles/index.scss
// 引入reset.scss，清除默认样式。最后的分号一定要加上，否则会导致下面的样式配置报错
@use './reset.scss';
注意
不推荐使用reset.scss清除默认样式。需要重新定义很多基础元素样式。 比如：使用Element Plus组件时，element 样式无效
1.2 现代化的选择normalize.css 替代Css resets（推荐）
- 安装normalize.css
pnpm intall --save normalize.css
- 在src/styles/index.scss文件中引入，并放在文件最顶部。
// styles/index.scss
// 最后的分号一定要加上，否则会导致下面的样式配置报错
@use 'normalize.css/normalize.css';
1.3 The New CSS Reset
- 安装The New CSS Reset或者下载最新的文件并放到src/styles/下。
npm i the-new-css-reset
- 在src/styles/index.scss文件中引入，并放在文件最顶部。
// styles/index.scss
// 最后的分号一定要加上，否则会导致下面的样式配置报错
import "the-new-css-reset/css/reset.css";
为什么顺序很重要？
CSS的规则是“后来者居上”。必须先把默认样式清除掉，在使用自己的新样式。所以reset必须在最前面。
1.4 三种方式的比较
| 方法 | 优点 | 缺点 | 推荐场景 |
|---|---|---|---|
| 经典reset | 提供一个完全空白的画布，控制力最强 | 可能需要重新定义很多基础元素的样式。比如h1。对第三方组件的样式也不友好 | 设计系统或需要高度定制化UI的项目 |
| normalize.css | 保留有用的默认值，修复bug，跨浏览器一致性好 | 不会移除所有的样式，可能有些默认样式你还是不想要 | 绝大多数项目的首选，特别是内容型网站或标准应用 |
| The New CSS Reset | 结合了unset等新特性，非常强大和简洁 | all:unset 可能对以下嵌入式第三方组件有未知影响。 | 适合喜欢尝试新技术，追求极致简洁的开发者 |
2、定义全局样式变量
- 在src/styles下文件文件variable.scss，目的是定义全局样式变量。变量名称以$开头。
// variable.scss
$color: red;
$base-size: 10
- 在入口文件main.ts中导入样式文件。
// main.ts
// 引入全局样式
import '@/styles/index.scss'
- 在vite.config.ts文件中配置scss。
// vite.config.ts
export default defineConfig({
css: {
preprocessorOptions: {
scss: {
additionalData: '@use "@/styles/variable" as *;'
}
}
}
})
三、使用全局样式
上面定义了两个全局样式base-size，直接在组件中使用即可。
<style scoped lang="scss">
div {
h1 {
// 使用全局样式变量$color
color: $color;
}
}
</style>
