在Vue中引入全局css(Global CSS in Vue)

1. 为什么我们要使用全局样式?

(1) 覆盖样式
  常用于覆盖第三方UI组件的样式
(2) 默认样式
  常用于定义项目默认间隙、全局字体等

2. 添加全局样式

  • 新建一个Vue项目(Vue init webpack 项目名字)
  • 在src文件夹中新建 我们的全局样式 以下是步骤
    • 新建一个style文件夹
    • 在style中新建我们的全局css,这里叫 main.js 下图为结构
      在这里插入图片描述

3.引用

全局样式的引用当然就是全部地方都能用,如果你是新建Vue项目,那你有两种选择
	1. 在main.js中引用
	2. 在App.js中引用
	3. 引用语句

@import './style/main.css';

Vue 3 中设置全局 CSS 主要有以下几种方式: 1. **使用单文件组件 (Single File Component)**: - 在 `.vue` 文件的 `<style>` 标签中定义全局样式。在这种情况下,样式将对当前组件及其所有子组件生效。如果想要在整个项目中全局生效,需要确保其他地方不会覆盖。 2. **使用 `@/assets/css/global.css` 或类似路径**: - 创建一个名为 `global.css` 或类似名称的 CSS 文件,并将其放置在项目的 `src/assets/css` 目录下。然后,在项目的 `main.js` 或 `setup.ts` 文件中通过 `import` 引入并使用 `Vue.config.globalProperties.$css` 注册它: ```js import './assets/css/global.css' Vue.config.globalProperties.$css = true ``` 这样,所有的 Vue 实例都会加载这个全局 CSS 文件。 3. **使用 CSS Modules**: 如果使用了 CSS Modules,可以在入口文件 `main.js` 或 `setup.js` 中导入并导出全局样式,使其可用作共享模块。 4. **使用预处理器(如 SASS、Less 或 Stylus)**: - 创建一个预处理器文件(比如 `variables.scss`),定义变量,然后在主全局 CSS 文件中引用它们。导入预处理器文件,然后在全局 CSS 中编写样式。 5. **使用 Vue CLI 配置**: - 对于 Vue CLI 项目,你可以修改 `vue.config.js` 中的 CSS 分割规则,将其配置为全局合并(`extract: false`)。这样,所有的 CSS 将会直接应用到 HTML 文档上。 记住,全局样式可能会有冲突,所以尽量保持简洁,避免与其他库或框架的样式冲突。同时,为了便于管理和维护,也可以考虑将不同类型的样式(如布局、颜色等)分别组织到不同的文件中。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值