前沿：
最近在项目开发中发现了一个很是棘手的问题，那就是在我自己的页面并没有引入某个外部的css文件，但是竟然被那个css中的样式给影响了，一开始的解决办法就是在自己的页面加入权重，这样的话代码冗余太多，于是就开始折腾到底之怎么回事，原来是css-loader加载机制的原因，下面把原理以及方法贴出来，以方便后期维护以及自己的学习。
首先看看大家常用的引入方式
<style rel="stylesheet/scss" lang="scss" scoped>
@import "../../styles/myBase.scss";
// 这样引入的话会被编译为全局样式
.FundProductsMoneyDetails {
.list_head {
padding: 0px !important;
}
.baseInfor {
margin: 20px 0px 0px 0px !important;
}
}
</style>
上面的代码中，好多人都认为加入scoped就不会被外部的样式影响，但事实并非如此，其实是这样的
css-loader对@import 引入的文件就会当作外部资源，然后将css文件单独取出来，将import引入的css计算结果与<style>中的样式混合后交给
style-loader来同意处理最后会解析为style标签加载在页面里面。由此就可以知道
@import "../../styles/myBase.scss";引入的样式作用域是全局的了。
以下为解决办法,如此引入的话样式只会在本组件内生效。而不会影响其他组件。
<style lang="scss" src="../../styles/myBase.scss"></style>
<style rel="stylesheet/scss" lang="scss">
.FundProductsMoneyDetails {
.list_head {
padding: 0px !important;
}
.baseInfor {
margin: 20px 0px 0px 0px !important;
}
}
</style>
