局部作用域内(scoped)使用@import引入css引发的css全局污染的问题

vue引入外部的css文件方式：

<style scoped>
@import '../../assets/styles/residentStyle.scss'; 


</style>


<style scoped  src='../../assets/styles/residentStyle.scss'>

</style>

　　但是这两种种方式 scoped不会生效，即通过@import引入的文件打包后会变成全局的

css-loader对import的文件会当做外部资源，那么我能理解为它是把import的css文件单独提取出来，并没有把其中的样式放在<style scoped>中解析，而是最后把<style>中计算结果和import的css文件混合后，交由style-loader最后解析为style标签加载在页面。

        但是有的博客说引入的如果是less等于编译文件会局部生效，但是我在项目中引入的scss文件并未有局部生效，而是影响到其他页面。

下面就是我在项目中使用外部引入scss预编译文件，但是他影响到登录的布局了。

residentStyle.scss



::v-deep .el-tooltip__popper {
    max-width: 400px;
    line-height: 180%;
}
::v-deep .el-col-6 {
    width: 30% !important;
}
::v-deep .el-form-item__label {
    width: 100px !important;
}
::v-deep .el-form-item__content {
    margin-left: 100px !important;
}

<style scoped>
@import '../../assets/styles/residentStyle.scss'; 


</style>

总结为：import的css文件会被编译为全局样式但是引入less等预编译文件，就会局部生效还有待考究。