海上灵光

在一般情况下，使用 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>