在一般情况下,使用 import 导入的 css 文件默认会在vue组件中全局有效,对于某些情景可能需要局部导入。本文将介绍局部导入 css/scss 样式文件的方法。
css
<!-- global -->
<style>
@import "../assets/style.css";
</style>
<!-- global: 对于 css 这样导入 scoped 不会生效 -->
<style scoped>
@import "../assets/style.css";
</style>
<!-- global -->
<style src="../assets/style.css"></style>
<!-- scoped:对于 css 唯一生效的方式 -->
<style src="../assets/style.css" scoped></style>
scss
<!-- global -->
<style lang="scss">
@import "../assets/style.scss";
</style>
<!-- scoped:对于 scss 这样导入 scoped 可以生效 -->
<style lang="scss" scoped>
@import "../assets/style.scss";
</style>
<!-- global -->
<style src="../assets/style.scss" lang='scss'></style>
<!-- scoped:这种方式也会使 scoped 生效 -->
<style src="../assets/style.scss" lang="scss" scoped></style>