vue 中css的引入方式

最新推荐文章于 2024-08-03 21:59:12 发布

翻译最新推荐文章于 2024-08-03 21:59:12 发布 · 2.1k 阅读

文章标签：

#vue #css

Vue 专栏收录该内容

32 篇文章

订阅专栏

1. 一般是在main.js中引入公共样式

import '@/assets/css/reset.css'

2. 在App.vue中引入

<style>

 @import "assets/icon/iconfont.css";

</style>

3. 在views下面的xxx.vue中引入

<style>

@import "../assets/css/contact_us.css";

或者

@import "~@/assets/css/contact_us.css";

</style>

@符号是代表src，原因是在build/webpack.base.conf.js中，有如下配置

如果自己也需要一些其它简写形式，也可以在下面仿写设置

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

学习代表未来

关注关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

用Vue-cli搭建的项目中引入css报错的原因分析

08-29

Vue-cli项目中引入css报错的原因分析在使用Vue-cli搭建项目时，遇到引入css文件报错的问题是非常常见的。本文将详细介绍这种问题的原因分析和解决方法。问题描述在使用Vue-cli搭建的项目中，我们经常需要引入...

浅谈vue引入css,less遇到的坑和解决方法

08-28

在前端开发中，CSS 预处理器 Less 是一种非常流行的选择，但是在 Vue 项目中引入 Less 时，可能会遇到一些问题。下面我们将讨论在 Vue 项目中引入 CSS 和 Less 的一些坑和解决方法。坑之一：报错的使用在使用 ...

参与评论您还未登录，请先登录后发表或查看评论

vue引入css和js的方法

weixin_30603633的博客

06-22

191

1.引入js的话 require('地址') imgport xxx from ‘src’ import xxx 2.引入css @import ‘ ’ 转载于:https://www.cnblogs.com/zhouyideboke/p/9213695.html

vue引入css

你蠢哭我咯的博客

08-01

4712

第一种全局引入：在main.js中import './assets/iconfont/iconfont.css' //注意'./'一定要加不然会报错第二种局部引入：在组件中<style scoped> @import '../assets/iconfont/iconfont.css'; </style>

vue引入css文件

ymyzyx的博客

10-07

1215

【代码】vue引入css文件。

vue页面中引入css

无名之辈-_-

07-09

2046

1.当你的css样式中没有使用sass的时候，可以直接引用后缀名为.css的样式文件 <style> @import '../../satic/index.css'; </style> 或者使用 <style> @import url('../../static/index.css'); </style> 2.当你使用了sass的时候，引入的样式文件后缀名一定要是.scss <style lang="scss"> @import '../../

Vue引用CSS

weixin_72132360的博客

08-03

1278

在中，很多时候会使用相同效果的css，这个时候我们可以写一个把该样式写入一个css文件，想要使用时就去调用就可以了，关键来了！vue如何去引用这个css文件呢?

vue 引入公共css文件的简单方法(推荐)

08-28

在 Vue 项目中，引入公共 CSS 文件是一个非常重要的步骤。今天，我们将分享三种简单的方法来引入公共 CSS 文件，以便提高开发效率和代码维护性。方法一：在入口 js 文件中引入在入口 js 文件（通常是 main.js）...

vue css 引入asstes中的图片无法显示的四种解决方法

11-21

在Vue CLI 2.x的项目中，我们经常会遇到在CSS样式中引用assets目录下的图片，在本地开发时一切正常，但部署到线上环境时图片无法显示的问题。这主要是因为`config/index.js`文件中`build`对象的`assetsPublicPath`值...

Vue项目中引入外部文件的方法（css、js、less）

10-19

在Vue项目中，正确地引入外部文件如css、js和less是构建高效可维护项目的基础。本文将详细探讨如何在Vue项目中引入这三种类型的外部文件。首先，我们来讨论引入css文件。通常，外部css文件可以帮助我们进行样式...

Vue中引入样式文件的方法

12-03

一、在vue中使用scss 首先进行安装如下依赖： cnpm i sass-loader node-sass -D 二、vue中引入样式文件 1）在index.html模板html文件中引入，这种方式引入的原样编译在生成的html文件中，如果想要通过link引入外部的样式文件，建议使用这种方式： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>2imis</title> <link rel="stylesheet" href="./static/reset.css" rel="external n

VUE引用CSS，全是干货

qq_62694876的博客

12-14

7361

在vue中，很多时候会遇见相同效果的css，这个时候我们可以写一个css文件，想要使用时就去调用就可以了，关键来了，vue怎么样引用呢?

vue引入css的两种方式

ahu2331的博客

07-24

482

方案1、在main.js中引入方式 import '@/assets/css/reset.css' 方案2、在.vue文件的<style/>标签里面引入 @import "../assets/css/index.css"; 转载于:https://www.cnblogs.com/zousaili/p/9361443.html...

vue引入css三种方式

atu1111的博客

04-06

5万+

vue引入css三种方式 1.在对应.vue文件的中引入 <script> import "@/assets/css/reset.css" </script> 2.在.vue文件的中引入 <style scoped> @import '../../assets/css/VueCss.css'; </style> 3.main.js 全局引入 import './assets/css/common.css' ...

在vue中如何引入外部的css文件

xwnxwn的专栏

03-16

7026

这篇文章主要介绍了在vue中如何引入外部的css文件，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教。

在vue中引入外部的css文件

最新发布

04-02

### Vue 页面中 CSS 文件的引入方法及最佳实践在 Vue 项目中，正确引入和管理 CSS 文件对于项目的可维护性和性能至关重要。以下是几种常见的 CSS 文件引入方法以及推荐的最佳实践。 #### 方法一：全局引入 CSS 文件如果某些样式需要在整个应用中生效，则可以通过 `main.js` 或类似的入口文件进行全局引入。这种方式适用于第三方库的样式表或者通用的基础样式。 ```javascript // main.js import './assets/styles/global.css'; // 引入全局样式文件 ``` 这种方法的优点在于简单明了，缺点是可能导致不必要的样式污染[^4]。 --- #### 方法二：局部引入 CSS 文件为了减少全局样式的冲突并提高模块化程度，在单文件组件 (SFC) 中可以使用 `<style>` 标签单独引入所需的 CSS 文件。 ```vue <template> <div class="example">这是一个示例</div> </template> <script> export default { name: 'ExampleComponent' }; </script> <style scoped> @import '../styles/example.css'; .example { color: red; } </style> ``` 上述代码展示了如何在一个组件内部通过 `scoped` 属性限制样式的作用范围，从而避免与其他组件发生样式冲突。 --- #### 方法三：集成 CSS 框架（如 Tailwind CSS）当使用像 Tailwind CSS 这样的工具链时，通常会将其配置为全局可用，以便充分利用其功能强大的类名系统。具体步骤如下： 1. **安装必要依赖** 使用 npm 或 yarn 安装所需包。 ```bash npm install tailwindcss postcss autoprefixer npx tailwindcss init ``` 2. **配置 PostCSS** 编辑 `postcss.config.js` 来支持 Tailwind CSS 插件。 ```javascript module.exports = { plugins: [ require('tailwindcss'), require('autoprefixer') ] }; ``` 3. **引入 Tailwind CSS 样式** 在主样式文件中导入核心样式。 ```css @tailwind base; @tailwind components; @tailwind utilities; ``` 此方法特别适合大型项目，因为它提供了高度灵活性的同时还保持了良好的性能表现[^2]。 --- #### 方法四：条件加载特定页面的 CSS 有时仅需针对某个路由或视图加载对应的 CSS 资源，此时可通过动态 import 实现按需加载。 ```javascript if (process.client) { // 假设这是 Nuxt.js 环境下的写法 import('@/assets/css/specific-page.css'); } ``` 这种技术有助于降低初始加载时间，尤其适用于多页应用程序(PWA)[^5]。 --- ### 最佳实践总结 - 对于基础重置样式、主题颜色等公共资源建议采用全局方式； - 单独处理各组件专属的设计方案则应考虑局部作用域； - 如果涉及复杂的布局需求或是追求极致定制能力的话，不妨尝试结合预处理器(Sass/Less/Stylus)与现代框架(Tailwind/Bootstrap); - 动态懒载入机制能够有效改善用户体验，特别是在移动设备端显得尤为重要。