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>