前沿：

最近在项目开发中发现了一个很是棘手的问题，那就是在我自己的页面并没有引入某个外部的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>