Vue学习之旅Part17：Vue集合Webpack组件中的样式标签的lang和scoped属性

默认在<style>标签里设置的样式是全局的样式：

<template>
    <div>
        <h3>Account - Login</h3>
    </div>
</template>

<script>
export default {
    
}
</script>

<style>
    div{
        color:aqua;
    }
</style>

即使该<style>标签是在子组件里设置的 也同样是影响到全部的样式
此时 可在<style>标签上添加一个scoped属性(没有属性值)

添加之后 样式就只能在该组件的范围内产生影响了：

<style scoped>
    div{
        color:aqua;
    }
</style>

默认的<style>标签只支持普通的css样式

若要启用scss或less等其它样式 需给<style>标签设置lang属性：

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

当然 前提是需要配置相应的loader(加载器)
详细请参看我另一篇博客：在Webpack中配置loader加载器以实现正常打包样式文件

lang属性支持很多样式 例如css less sass postcss stylus等

---