webpack使用vue组件中style属性和scoped属性

1.scoped属性

在webpack中使用vue组件时，如果用到了子组件，在子组件里面写了样式：

<template>
  <div>
    <h3>这是Account的登录子组件</h3>
  </div>
</template>

<script>
</script>
<style>
div {
  color: red;
}
</style>

这样写的样式，最后会作用到全局，而不仅仅只是这一个组件的内容

因此需要在style标签添加一个属性：scoped

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

这样就解决了。

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

<style lang="scss" scoped>
/* 普通的 style 标签只支持 普通的 样式，如果想要启用 scss 或 less ，需要为 style 元素，设置 lang 属性 */
body {
  div {
    font-style: italic;
  }
}
</style>