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>