vue文件style标签变成黄色，media query is expected

于 2024-08-08 21:15:00 发布
阅读量234 收藏
点赞数 2
分类专栏： vue css 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/h_123456___/article/details/141031259
版权
vue 同时被 2 个专栏收录
18 篇文章 0 订阅
订阅专栏
css
3 篇文章 0 订阅
订阅专栏

效果如下图所示，红色波浪线，鼠标放上去提示 media query is expected
在这里插入图片描述

对比其他文件后发现是引入scss文件后后面少了分号，导致报错，加上分号，效果如下图，完美解决~
在这里插入图片描述

hjt_未来可期
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
浅谈CSS响应式布局——media query（媒介查询）
筱葭的博客
03-13 1万+
①　使用 @media 查询可以针对不同的媒体类型定义不同的样式。 ②　@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果需要设置设计响应式的页面。 ③　重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。 1、media query的语法： @media 媒介类型and|not|only (媒介特征) { ... } 媒介类型：
详解.vue文件中style标签的几个标识符
10-18
在Vue文件中，通过使用<style>标签可以引入组件的样式，而在Vue单文件组件（.vue文件）中，<style>标签内可以加入一些标识符来增强样式的封装性和功能性。本文将详解.vue文件中<style>标签的几个关键标识符，帮助...
小程序引入样式 报错 media query expectedcss(css-mediaqueryexpected)
每日秃头
10-21 3007
样式引入结尾加分号即可
2020-08-21微信小程序中报错media query expected
Nighsloth的博客
08-21 1928
今天在小程序的xcss中引用阿里巴巴的图标，导入后写样式报错media query expected 报错效果 其实在你写的时候，wxss会自动给你报错，但可能大都和我一样，样式都写好了，需要引用图标的时候才会导入iconfont的文件，这样就容易混淆错误。 解决方法 其实很简单，就是符号的问题。 我搜资料的时候发现，有时多打了一个空格也会有这种报错情况，所以大家记得检查细节 ...
style格式报错} expectedcss(css-rcurlyexpected)
luweisixsix的博客
10-28 1万+
格式写错了，我把lang写错了，报的错误，错误代码“} expectedcss(css-rcurlyexpected)”
css的mediaquery查询几种不生效的原因
qq_37558379的博客
06-30 6425
今天上午搞了半个小时，在webstrom中修改了css样式，用chrom浏览器浏览不生效，在网上查了半天，看是不是webstrom的有写保护，或者chorm浏览器不支持，最后发现少and后面少了一个空格导致css mediaquery查询不生效，即使在chrom中的network中css样式文件已经被加载了。@media screen and 不起作用原因汇总。首先确认是不是css本身的问题，而不...
vue组件讲解(is属性的用法)模板标签替换操作
12-28
vue中is的属性引入是为了解决dom结构中对放入html的元素有限制的问题，譬如ul里面要接上li的标签，引入is的属性后，你完全可以写成这样 <li is=row> </div> 这样会保证dom结构在浏览器的正常渲染，尽量避免...
浅谈关于.vue文件中style的scoped属性
08-29
浅谈Vue文件中style的scoped属性 scoped属性是Vue中用来限制样式作用域的属性，它使得样式只作用于当前的Vue文件。 scoped属性可以实现style只作用于当前的.vue文件，避免样式污染其他组件。 scoped属性的实现原理...
media query is expected
牛晓林的博客
12-16 703
如图，.vue 文件中的style部分一直报错。对比了下其他文件，原来是上面import少写了分号 是考验眼力的问题，也是考验基本功的问题。 加上分号，完美~
Media Queries详解
weixin_30376323的博客
04-13 273
Media Queries直译过来就是“媒体查询”，在我们平时的Web页面中head部分常看到这样的一段代码： 1 <link href="css/reset.css" rel="stylesheet" type="text/css" media="screen" /> 2 <link href="css/style.css" rel="stylesheet" typ...
媒体查询media query
honey_seve7n的博客
10-13 549
1.媒体查询让css可以更精确作用域不同媒体类型和同一媒体的不同条件 ；可以使用max或min表示“大于等于”，“小于等于”；可以用在css中的@media和@import规则上也可用在html和xml中 @media screen and (width:600px){…} @import url('demo.css') screen and (width:600px) &lt;link m...
vue项目运行报错Proxy error: Could not proxy request “***UIRL” from “***” to “****”
热门推荐
h_未来可期_的博客
03-01 7万+
今天在测试反向代理的时候，访问本地接口的时候报错Proxy error: Could not proxy request /miaomiao/cityList from localhost:8080 to http://10.12.0.111:3001. See https://nodejs.org/api/errors.html#errors_common_system_errors for more information (ECONNREFUSED). 首先看编译器报错 出现这种问题大致两种原因
el-upload解决无法二次上传问题
h_未来可期_的博客
01-16 5257
el-upload无法二次上传、二次上传失败
element-ui表格表头插入icon
h_未来可期_的博客
12-30 3979
element-ui中表格的表头增加icon并设置点击事件 首先看element-ui中给出的渲染label的函数render-header element组件库 话不多说，直接上代码 <el-table-column prop="id" label="申请编号":render-header="renderHeader"> </el-table-column> <script> method: { renderHeader(h, { column, $ind
element组件table表格表头添加下拉框等其他组件
h_未来可期_的博客
01-30 2138
最近项目里遇到一个需求，需要在表头添加下拉框组件，来控制列显隐 这次先解决添加下拉框问题，下次解决下拉框控制显隐 首先看官方文件里面给出的添加组件的slot 一些简单的需求 直接用这个方法就可以了 下面直接上代码 <el-table-column label="工单ID" type="index" width="80" fixed> </el-table-column> <el-table-column prop="tenantName" label="租户名称" mi
vue中el-input回车事件刷新页面
h_未来可期_的博客
12-31 1875
需求 在页面中，输入框中输入内容以后，回车查询下面的数据 方案 使用input的回车事件 => @keyup.enter.native="” 问题 页面中点击回车以后，会刷新页面，并且路由中加了一个？ 解决方案 查证后得知，form表单中，如果只有一个input框的话，回车的时候默认提交了表单，导致刷新了页面 方案1 添加一个其他的input，但是不显示出来 vue的话不能使用v-if修饰，v-if还是会出问题，必须使用v-show <el-form ref="searchFom"
vue中data之间数据自调用undefined的问题
h_未来可期_的博客
08-27 1773
需求： 多个div，根据各自的num计算各自的百分比 问题： 在data中，自己调用自己的数据生成百分比浏览器报错 data(){ return{ {num:100}, {num:0,percent:this.getPercent(this.totalData[1].num,this.totalData[0].num), } } 这样的话，浏览器中报错 解析： 我认为，虽然在vue中，this是指向VueComponent的，但是data中的属性调用另一属性的时候，data中的数据 还没
使用axios防止触发多次重复请求(防抖)
h_未来可期_的博客
03-08 1272
需求 最近在做移动端电影项目的搜索组件的时候，发现每次输入都会调接口访问，要实现的是“不是每次输入都调用接口，而是取最后一次输入的值” 有两种方法实现， 在watch中首先使用clearTimeout()，然后在后面开启一个新的定时器setTimeout()，将axios请求写到后面可以实现但是不推荐使用 axios自带的 下面直接看代码 <template> <input type="text" v-model="message"> </template>
element 控制表格列显隐
h_未来可期_的博客
02-01 1056
最近接了个新需求，需要用户自己筛选某一列显示与否 其实大致思路就是使用CheckBox绑定的值控制表格列绑定的v-if的值，通过vue的watch来监控CheckBox绑定值的变化来控制 下面看代码 //首先是引入element组件中的表格 <el-table :data="tableData" stripe border style="width: 98%" ref="tableDataRef"> <el-table-column type="selection" width=".
如何在vue文件中的<style >标签使用变量
最新发布
05-26
在Vue文件中使用变量的方式与在普通的CSS文件中有所不同。可以使用Vue的计算属性来定义变量，然后在<style>标签中使用这些变量。 例如，假设要定义一个主题颜色变量，可以在Vue组件中添加一个计算属性： ``` <template> <div class="container"> <h1 :style="{ color: themeColor }">Hello World</h1> </div> </template> <script> export default { computed: { themeColor() { return '#FF0000'; // 这里可以根据需要设置主题颜色 } } } </script> <style> h1 { font-size: 24px; } </style> ``` 在上面的例子中，我们定义了一个计算属性`themeColor`，然后在`<h1>`标签的`style`属性中使用这个变量来设置文字颜色。这个计算属性可以根据需要返回不同的颜色值，从而实现动态变换主题。 需要注意的是，在样式中使用变量时，需要把变量写在`:root`伪类中，以便全局使用。例如： ``` <style> :root { --theme-color: #FF0000; } h1 { color: var(--theme-color); } </style> ``` 这样可以在整个应用中使用这个`--theme-color`变量。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值