关于Vue.js的一个问题

[chen_2016_web]

我想问问各位大神：
例如，有一个很简单页面，页面有两部分组成。这个页面的名称是Home.vue，即主页。

      <H></H>
      <M></M>

JS，我就不写了。已经成功的引入组件H和组件M。组件H是头部组件。

下面是组件H，即H.vue，里面有:

      <header id="h">
            <B></B>
      </header>

而组件H，里面引入了轮播图组件B。

我使用了路由，点击轮播图组件，路由会跳转到L组件，L里面有很多板块，我把它分成多个小组件，例如XYZ。那么问题就来了，大家都知道，可以使用scope让某个组件，独用某个css文件。这本来是好事，但也有问题。例如，我这里引入了css文件，index.css。

      <div id="l">
           <X></X>
           <Y></Y>
           <Z></Z>
      </div>
     <style src="../index.css" scoped></style>

问题就是，index.css只作用于L组件，而不作用于XYZ组件？这其中的原因，我不知道。如果想css文件生效，必须XYZ都引入一个css文件。但，这是一个页面，将会有很多共用css。如果每个组件都引入同类的css，岂不是浪费资源吗？
以前，我会把共用的css放在index.html文件里面，让页面一次渲染。但如果，这是一个很大的项目，这一次性加载进来的css，将是何等的巨大！JS，有一样的问题。我看了很多移动端站点，他们是实现了真正的按需加载，且没有过多的浪费。例如苏宁等等。解决方法，肯定有的。但我不会。求大神给一个合理回答，万分感谢！
备注：我用的是vue-cli来开发的，使用的是webpack-simple。

[亡灵走秀]

我想，大概是你用了 scoped 这个“指令”吧， 使用scoped编译会将当前引入的css文件样式类全部hash化掉了。 这个东西将当前主.vue文件引入的css限制只作用当前vue文件。下面的就不会有用了。

[chen_2016_web]

这个问题，有人能解决吗？如果没人，来个人，随便回复一句，我结帖了。

[火凤水凰]

貌似css 按需加载，的先按组件也是按需加载才行的。