Vue中webpack的Style的lang和Scoped属性

Dream城堡

发布于 2018-12-13 16:23:13

2.5K0

发布于 2018-12-13 16:23:13

文章被收录于专栏：Spring相关Spring相关

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>

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2018.11.15 ，如有侵权请联系 cloudcommunity@tencent.com 删除

webpack