vue 中引入 css 的方法：1. 全局 css 文件；2. 局部 css；3. css 预处理器；4. css 模块；5. 外部 css 文件。
在 Vue 中引入 CSS
在 Vue 应用程序中引入 CSS，有以下几种方法：
1. 全局 CSS 文件
-
在
<style></style>标签中引入 CSS 文件。立即学习“前端免费学习笔记（深入）”；
<code class="vue"><style> @import "./styles.css"; </style></code>
2. 局部 CSS
-
使用
<style scoped></style>标签将 CSS 作用于当前组件。
mallcloud商城下载mallcloud商城基于SpringBoot2.x、SpringCloud和SpringCloudAlibaba并采用前后端分离vue的企业级微服务敏捷开发系统架构。并引入组件化的思想实现高内聚低耦合，项目代码简洁注释丰富上手容易，适合学习和企业中使用。真正实现了基于RBAC、jwt和oauth2的无状态统一权限认证的解决方案，面向互联网设计同时适合B端和C端用户，支持CI/CD多环境部署，并提
<code class="vue"><style scoped> .my-class { color: red; } </style> <template> <div class="my-class">Hello World</div> </template></code>
3. CSS 预处理器
- 使用 CSS 预处理器（如 Sass、LESS）来写 CSS。
- 首先安装预处理器包，然后在
.vue文件中引入它们。
Sass
<code><style lang="sass"> @import "./styles.scss"; </style></code>
LESS
<code><style lang="less"> @import "./styles.less"; </style></code>
4. CSS 模块
-
使用 CSS 模块将 CSS 类名限定在当前组件中。
<code class="js">// styles.module.css .my-class { color: red; } // MyComponent.vue <style module> .my-class { /* 组件内唯一的类名 */ } </style> <template> <div class="my-class">Hello World</div> </template></code>
5. 外部 CSS 文件
-
使用
link标签引入外部 CSS 文件。<code class="vue"><head> <link rel="stylesheet" href="./styles.css"> </head></code>
