在vue中引入less文件样式乱了,当用@import url(‘..‘)； 引入时发现没有效果的情况

已于 2022-05-09 17:16:45 修改
阅读量2.8k 收藏
点赞数
文章标签： javascript 前端 vue.js less css3
于 2022-04-01 15:05:57 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_52952413/article/details/123898160
版权

在vue中引入less文件样式乱了，这时候…

当用@import url(‘…’); 引入时发现没有效果的情况

在这里插入图片描述
将上图scoped去掉就好了
当加上scoped会在标签中加一个唯一标识，造成的结果就是只有在该组件中的css样式时有效
在这里插入图片描述

一蓑烟雨，一任平生
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
@import "../style/lines.scss" 导致background: url（）路径无效问题
weixin_40404336的博客
03-12 2282
@import "../style/lines.scss" 导致background: url（）路径无效问题 解决方案是在webpack中的vue.config.js中配置 configureWebpack: config => { let obj = {}; obj.resolve = { alias: { 'img': '@/ass...
Vue中引入外部css导致的全局污染
ation_work的专栏
08-04 1388
当在前端使用vue开发时，给特定页面做好了css并且通过import去导入到当前页面；在编译运行之后发现其他页面也受到影响更改了样式，即“全局污染”。
vue中使用less/sass以及使用中遇到无效的问题
热门推荐
xiazeqiang2018的博客
07-17 2万+
在vue官方脚手架中，即vue-lci搭建的项目中，可以轻易的使用less/sass。 先使用npm下载依赖，命令行为’npm install less less-loader –save’,再在webpack.base.conf.js中添加rules对象： { test: /\.less$/, loader: "style-loader!css-loade...
vue中style里面使用@import引入css导致全局作用域，scoped属性不生效解决方案
weixin_44897405的博客
04-11 3464
直接上图： 解决方案如下： ~！注意：这里src的路径一定要正确不然会一直报错： 点击具体解释请参考大佬博客
vue2 less-loader无效解决
路过君的博客
01-25 1783
安装时报警告 less-loader@10.2.0 requires a peer of webpack@^5.0.0 but none is installed. You must install peer dependencies yourself. 项目中使用less样式时报错 ERROR Failed to compile with 1 error error in ./src/App.vue?vue&type=style&index=0&lang=less&amp
vue scoped html样式无效
西洲
07-03 7073
1、问题场景 page1,page2都使用flexible移动端自适应的时候，有一个页面page2需要手动设置rem基准值， //手动设置基准 html{ font-size: 120px !important; } 但是在page2引用的self.less里面设置了基准，竟然没有生效 2、问题分析scoped属性 在引用self.less的时候，使用了属性scoped ...
less 使用mixins import导入路径@/xxx.less 解析报错
hzxOnlineOk的博客
08-12 5296
配置多个站点404 我选择了配置多个location。 location / { root /data/html/; index index.html index.html; } location /publicity { root /usr/local/nginx/hzcloud-timp-front/; index index.html index.htm; } 配置完以后访问。http://xxxx/...
Vue项目中引入外部文件的方法（css、js、less）
10-19
本篇文章主要介绍了Vue项目中引入外部文件的方法（css、js、less），非常具有实用价值，需要的朋友可以参考下
vue在index.html中引入静态文件不生效问题及解决方法
10-17
主要介绍了vue在index.html中引入静态文件不生效问题及解决方法，本文给大家分享两种原因分析，通过实例代码讲解的非常详细 ,需要的朋友可以参考下
详解VUE中常用的几种import（模块、文件）引入方式
08-27
主要介绍了详解VUE中常用的几种import（模块、文件）引入方式，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Vue中通过<script></script>引入的Vue.js文件
04-28
我们可以在 Vue.js 的官网上直接下载 vue.min.js 并用 <script> 标签引入。 格式就是： <script src="./js/vue%20(1).js" type="text/javascript" charset="UTF-8"> src里面的内容根据自己的下载的Vue.js的文件位置...
vue项目中全局引入1个.scss文件的问题解决
10-16
主要跟大家介绍了vue项目中全局引入1个.scss文件的问题解决，文中通过示例代码介绍的非常详细，对大家学习或者使用vue具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
@import 引入less文件，scoped失效问题
weixin_43907110的博客
02-21 499
转换成用src 引入。
less - 嵌套、Import 导入
weixin_42235173的博客
06-05 852
嵌套 在我们书写标准 CSS 的时候，遇到多层的元素嵌套这种情况时，我们要么采用从外到内的选择器嵌套定义，要么采用给特定元素加 CLASS 或 ID 的方式 */\*------------------**嵌套**------------------\*/ /*轮播图*/ #wjs_banner{ .carousel-inner{ > div.item{ a.img_...
vue 引入iview3.x使用less更换主题的过程报错解决
neal
11-27 3697
说明：换肤报错 Inline JavaScript is not enabled. Is it set in your options? 解决方案如下： 1、按照iview官方的文档定制主题,webpack编译时会有个坑，下面简述一下主要过程 npm install iview –save  npm install less –save  npm install less-loader...
Vue Cli 3.0中使用@import引入外部css文件
Excalibur_C的博客
10-16 8466
我在Vue Cli 3.0项目中把当前页面的样式分离出来，在通过@import的方式引入 <style scoped> @import url("../styles/index.css"); </style> 从而减少单个页面的代码数量。 但是在，其他页面出现了样式错乱的问题，分离出来的那个样式文件的样式应用到了其他页面。 注意，不论是在首个页面还是其他页面我都有设置 ...
Vue使用@import 引入样式文件全局污染、使用scoped失效问题
qq_39441438的博客
12-15 1万+
scoped 在组件中的style使用@import方式引入外部css，发现引入的css会污染到其他地方。即所谓的样式全局污染。不管加不加scoped都一样。 <style lang="scss" scoped> @import url("/style/index.scss") <style> 上面这种情况即时加入了scoped也无效，样式一样会污染到其他地方。 所以改写成src的方式引入。 <style lang="scss" src="/style/index.sc
书籍学习|基于SprinBoot+vue的书籍学习平台(源码+数据库+文档)
最新发布
JIngJaneIL的博客
05-28 618
首先,论文一开始便是清楚的论述了平台的研究内容。其次,剖析平台需求分析,弄明白“做什么”,分析包括业务分析和业务流程的分析以及用例分析,更进一步明确平台的需求。然后在明白了平台的需求基础上需要进一步地设计平台,主要包罗软件架构模式、整体功能模块、数据库设计。本项目软件架构选择B/S模式和java技术，总体功能模块运用自顶向下的分层思想。再然后就是实现平台并进行代码编写实现功能。论文的最后章节总结一下自己完成本论文和开发本项目的心得和总结。通过书籍学习平台将会使书籍学习各个方面的工作效率带来实质性的提升。
【详细介绍WebKit的结构】
cz88888888666的博客
05-23 570
WebKit是一个开源的浏览器引擎，主要用于渲染网页内容，它最初由苹果公司为其Safari浏览器开发，目前被多种浏览器和应用程序使用，包括所有基于iOS和macOS的浏览器，WebKit的设计目标是提供快速、精准且流畅的网页浏览体验。
app.vue @import "./static/tabbar_icon/icon_sel_audit@2x.png";图片怎么引入
06-07
在Vue组件的样式中引入static目录下的图片，同样可以使用相对路径或者绝对路径。 如果你的组件样式是写在`<style>`标签中的，那么可以这样引入static目录下的图片： ```vue <div class="my-component"></div> ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值