Vue中webpack的Style的lang和Scoped属性

Vue中webpack的Style的lang和Scoped属性

1.scoped解决style应用到所有的问题

修改goods.vue中的style我们会发现到goods的时候回影响到其他的div样式,添加scoped作用域可以解决这个问题,如下:

<template>
    <div>
        <h1>这是goods组件</h1>

    </div>
</template>

<script></script>

<style scoped>

    div{
        color: red;
    }
</style>

2.使用lang标签

普通的style标签只支持普通的样式,如果想启用scss或less,需要为style设置lang属性

<template>
    <div>
        <h1>这是account组件</h1>

    </div>
</template>

<script></script>

<style lang="scss" scoped>
    body{
        div{
            font-style: italic;

        }
    }
</style>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏搞前端的李蚊子

微信小程序监听input输入并取值

小程序的事件分为两种,冒泡和非冒泡事件,像<form/>的submit事件,<input/>的input事件,<scroll-view/>的scroll事件等非...

49970
来自专栏知道一点点

bootstrap快速入门笔记(一)

10730
来自专栏Android干货

安卓开发-设置RadioButton的点击效果

36270
来自专栏无原型不设计

Mockplus实例之一看就会de五个交互功能

实例来源:豆瓣新加日记(https://www.douban.com/note/create) 先看看豆瓣新加日记的网页: ? 再看看已经制作好的原型预览...

62960
来自专栏smy

解决ios不支持按钮:active伪类的方法

 mozilla开发社区上有 :active 不起作用的答案: [1] By default, Safari Mobile does not use the :...

34870
来自专栏河湾欢儿的专栏

选中分享

10110
来自专栏禅林阆苑

前端拾零01—checkbox&radio&select总结

前端拾零收录日常开发中一些很常见很基础的前端操作,省去每次google甚至答案错误的烦恼

2K660
来自专栏web前端

05移动端事件

一、移动端三大事件          1、手指按下     ontouchstart      2、手指触摸     ontouchmove          ...

21450
来自专栏李蔚蓬的专栏

实现滑动菜单

新建一个空项目,修改主布局文件如下,DrawerLayout中放置了两个直接子控件,第一个字控件是FrameLayout,用于作为主屏幕中显示的内容,第二个...

28920
来自专栏Youngxj

CSS3随机背景图片切换特效

89760

扫码关注云+社区

领取腾讯云代金券