vue项目中，单独的组件引用对应的css样式

最新推荐文章于 2024-08-03 21:59:12 发布
最新推荐文章于 2024-08-03 21:59:12 发布
阅读量3.8k 收藏 4
点赞数 1
CC 4.0 BY-SA版权
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/AI_U20/article/details/87281307
本文介绍在Vue项目中，如何在单独的组件中正确引用局部的CSS样式文件，避免全局引入，提高代码的模块化和可维护性。通过具体实例说明了在不同目录层级下，如何正确设置CSS文件的相对路径。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

vue项目中，单独的组件引用对应的css样式

根据项目具体的文件路径配置，引入在当前页面路径下的css
示例中，login.css文件放在src文件夹下的assets文件夹下css文件夹内。
在这里插入图片描述
注：

  • 此文章记录不是在main.js里引入，main.js引入是公共css与js
  • 注意引入的css文件中相对路径是相对于css文件的位置，不然会报错
    在这里插入图片描述
vue实战指南 vue中通过ref更改css
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
10-11 1127
确实是一个强有力的工具。为了保持代码的整洁和可维护性，建议将所有与DOM相关的逻辑封装在一个单独的方法中，并尽量减少直接操作DOM的次数。此外，利用Vue的计算属性和侦听器也可以达到类似的效果，同时还能更好地遵循Vue的数据驱动原则。希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。在Vue.js的应用开发中，我们经常会遇到需要动态修改DOM元素样式的情况。此示例中，我们监听了窗口大小的变化，并根据不同的屏幕宽度设置了不同的高度值。
Vue的单页应用中如何引用单独的样式文件
Dear_Mr的博客
03-28 7398
Vue的单页应用中如何引用单独的样式文件 问题描述 对于.vue的文件来说，也是由结构、行为、样式三部分组成，在样式部分有个scoped的属性，也就是当前页面有效，当style标签内样式比较多时或者.vue文件之间有重复的时候，总感觉看起来不够整洁，所以就需要引入一些公共样式。下面就先说下如何引入单独的样式文件，这里就以CSS文件为例，之后再说下我的项目中的样式文件的划分 引入单独的样式...
vue 组件单独引入 css 注意事项
Lao_Cai_的博客
04-16 1229
vue 组件单独引入 css 注意事项 起因 想要在不同组件引入不同的引入不同的css，这样后面维护起来会容易一些 目录结构 报错 原本以为用这样就能引入了 <style> @import '@/assets/css/public.css'; </style> 但发现是报错 网上答复 百度了下网上的回答是这样的 <style scoped> 　　@imp...
在vue组件内单独引入css
qq_46160082的博客
02-06 2556
第一种方式 可以引入这种方式 @import "相对路径"; 但是要注意的是引入之后如果再在下面进行样式覆盖，那同样会生效 第二种方式
Vue引用CSS
weixin_72132360的博客
08-03 1200
在中，很多时候会使用相同效果的css，这个时候我们可以写一个把该样式写入一个css文件，想要使用时就去调用就可以了，关键来了！vue如何去引用这个css文件呢?
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 6708
这篇文章主要介绍了在vue中如何引入外部的css文件，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教。
浅谈Vue-cli单文件组件引入less,sass,css样式的不同方法
08-27
接下来，我们将讨论如何在Vue-cli单文件组件中引入less、sass和css样式。 内联写法 在Vue-cli单文件组件中，我们可以使用内联写法来引入less、sass和css样式。下面是示例代码： ``` // sass样式 // less样式...
vue2.0安装style/css loader的方法
11-29
这些组件库通常包含CSS样式，因此需要在项目中配置Webpack来处理CSS和样式加载。在这个过程中，`style-loader`和`css-loader`扮演了关键角色。下面是关于如何在Vue 2.0项目中正确安装和配置这两个加载器的详细步骤。...
vue刻度尺组件
08-14
总结起来，"vue刻度尺组件"是一个利用Vue.js框架实现的自定义组件，它通过结合HTML结构、CSS样式和JavaScript逻辑，提供了一种在Web应用中创建可配置刻度尺的解决方案。通过深入研究项目源码，你可以了解Vue组件开发...
在vue项目中安装使用Mint-UI的方法
10-18
这个插件能够帮助自动引入组件对应的样式文件。 - 安装插件后，需要在.babelrc文件中进行配置，确保插件被正确加载，并且通过指定的库名和样式设置，自动引入所需的CSS。 5. 具体使用Mint-UI组件： - 在使用Mint-...
在vue组件中style scoped中遇到的坑
weixin_30558305的博客
05-24 697
　　在uve组件中我们我们经常需要给style添加scoped来使得当前样式只作用于当前组件的节点。添加scoped之后，实际上vue在背后做的工作是将当前组件的节点添加一个像data-v-1233这样唯一属性的标识，当然也会给当前style的所有样式添加[data-v-1233]这样的话，就可以使得当前样式只作用于当前组件的节点。但是我们需要注意的是如果我们添加了子组件，同样的，如果子...
如何在VUE单页面引入CSS、JS（CDN链接）
kielin的专栏
01-25 1万+
可以有以下几个方法，关键看希望在什么环境下使用 1. JS/CSS想在全局使用，可以通过npm 安装后在main.js中引入，或在index.html中引入，这种大多不必说 2. 想在单页面使用，而又不想通npm安装，那个可以通过创建一个component的方式来引入，如下 &lt;template&gt; &lt;div id="baseReport" &gt; &lt;remote...
在vue单文件组件引入其他css
LLL_liuhui的博客
09-03 1090
<style lang="scss" scoped> @import "~@/assets/styles/main"; i { font-size: 20px; } </style> 注意：路径前面必须加~@，否则会出错
如何在vue 组件里引入css js
voyager911的博客
02-20 3750
vue引入外部css和js 直接上代码，不解释 &amp;lt;div id=&quot;app&quot; &amp;gt; &amp;lt;/div&amp;gt; &amp;lt;/template&amp;gt; &amp;lt;script src=&quot;/static/js/xx.js&quot; &amp;gt;&amp;lt;/script&amp;gt; &am
在vue-cli模式下，单个vue组件引入外部框架的css，而不干扰其他组件的方式
b453293486的博客
08-18 5327
有时会有在单独组件内引入外部框架的需要，而又不想干扰其他组件。 放在main里,css会影响到所有组件。 放到index.html同样会有影响。 所以要放到单组件的style scoped里 你可以 单独放在一个style里面：是有效的 &lt;style scoped&gt; .f6f6f6{ height:100px; backgr...
vue 引入公共css文件
热门推荐
Smartsunsing的博客
11-14 8万+
1、在入口js文件main.js中引入，一些公共的样式文件，可以在这里引入。 import Vue from 'vue' import App from './App' // 引入App这个组件 import router from './router' /* 引入路由配置 */ import axios from 'axios' import '../static/css/global.c
【vue】添加scoped后CSS样式只能作用于当前的组件有效
WANGHUAN-
03-19 5396
在vue文件中的style标签上，有一个特殊的属性：scoped。当一个style标签拥有scoped属性时，它的CSS样式就只能作用于当前的组件，也就是说，该样式只能适用于当前组件元素。通过该属性，可以使得组件之间的样式不互相污染。如果一个项目中的所有style标签全部加上了scoped，相当于实现了样式的模块化。 添加scoped后样式会有一串唯一标识 ...
关于Vue-cli 组件引入CSS样式文件
weixin_30832143的博客
03-01 3152
在 Vue-cli 组件 .vue 文件中引入 css 样式表出错 　　　　由于使用Vue-cli后， 引入css 样式表 不需要 多余../../ 之类路径　　 　　　　 现在写法也发生了改变　　　 <style lang="stylus" rel="stylesheet/stylus"> @import '~@/common/stylus/mixins...
在vue项目中怎么异步加载css
最新发布
02-27
### Vue 项目中 CSS 的异步加载方法 在 Vue 项目的构建工具配置中，可以利用 Webpack 的 Code Splitting 功能来实现 CSS 文件的异步加载。通过这种方式，能够有效减少初始页面加载的时间，提升用户体验。 #### 使用 `import()` 函数动态导入样式文件 对于单个组件而言，在需要的时候才去请求对应的样式资源是一种常见的做法： ```javascript export default { mounted() { this.loadStyles(); }, methods: { async loadStyles() { await import('@/assets/styles/specific-component.css'); } } } ``` 这种方法允许开发者仅当特定条件满足时（比如用户滚动到某个位置），再触发样式的下载[^1]。 #### 组件内局部注册样式并结合懒加载机制 如果希望更细粒度地控制哪些部分应该被延迟加载，则可以在定义组件的同时指定其关联的样式表，并设置为按需加载的形式： ```html <template> <!-- ... --> </template> <script setup> // ... </script> <style scoped module> @import url('./path-to-your-dynamic-style.css?v=' + new Date().getTime()); </style> ``` 注意这里的 `scoped` 和 `module` 属性可以帮助确保这些样式只应用于当前组件内部而不影响其他地方；而 URL 后面加上时间戳是为了防止浏览器缓存旧版本的 CSS 文件[^5]。 #### 路由级别的懒加载与样式绑定 当涉及到多页应用或多视图切换场景下，还可以考虑基于路由来做整体性的优化策略——即每当进入一个新的 route 之前先准备好所需的静态资源，包括但不限于 JavaScript 和 CSS: ```javascript const Home = () => ({ component: import(/* webpackChunkName: "home" */ '../views/Home.vue'), loading: LoadingComponent, error: ErrorComponent, delay: 200, // 只有超过这个毫秒数才会显示loading界面 timeout: 8000 // 如果超过此数值则展示error界面 }); const routes = [ { path: '/', name: 'Home', component: Home }, // other routes... ]; ``` 上述代码片段展示了如何创建一个带有自定义选项的对象用于描述待加载的目标模块。其中不仅包含了目标组件本身，还额外指定了几个辅助参数以便更好地管理加载过程中的状态变化[^3]。 #### 配置 Webpack 对于 CSS 提取的支持 为了让以上方案生效，还需要适当调整 Webpack 构建配置项，使得打包后的输出结构支持分包拆分以及单独提取公共依赖关系等功能。通常这可以通过安装和配置诸如 `mini-css-extract-plugin` 插件来完成： ```bash npm install --save-dev mini-css-extract-plugin ``` 接着修改 `webpack.config.js` 中的相关规则如下所示： ```javascript const MiniCssExtractPlugin = require('mini-css-extract-plugin'); module.exports = { plugins: [ new MiniCssExtractPlugin({ filename: '[name].css', chunkFilename: '[id].css' }) ], module: { rules: [{ test: /\.css$/, use: [MiniCssExtractPlugin.loader, 'css-loader'] }] } }; ``` 如此一来便能够在编译阶段自动识别出那些适合独立出来的 CSS 片段，并将其放置在一个或多个外部链接文件之中供运行时期调用[^4]。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值