VUE提取公共css踩小坑 之 动态加载组件

如何提取VUE组件中的CSS成独立的.css文件，官方文档里说的很清楚了，官方文档，提取 CSS 到单个文件，按文档测试，反复对比，打包后的结果始终是：

Asset       Size  Chunks                    Chunk Names
3f088e105cd24828c4d81390cf0d9522.png    25.5 kB          [emitted]
0.js    18.3 kB       0  [emitted]
1
4000
.js  357 bytes       1  [emitted]
app.js     718 kB       2  [emitted]  [big]  app
index.html  182 bytes          [emitted]

我的CSS文件呢！！！

为了查错，新起了一个配置文件，几乎把所有其他不相关的配置都删除了，可是始终还是这个结果~

左右思量，突然想起来是不是和组件的加载方式有关系，我的组件是采用异步加载的，如下：

const Hello_com = () => import('./components/hello.vue')

所以做一下修改，重新打包测试

//const Hello_com = () => import('./components/hello.vue')
import Hello_com from './components/hello.vue'

打包提示：

Asset       Size  Chunks                    Chunk Names
3f088e105cd24828c4d81390cf0d9522.png    25.5 kB          [emitted]
0.js  357 bytes       0  [emitted]
app.js     725 kB       1  [emitted]  [big]  app
style.css  206 bytes       1  [emitted]         app
index.html  222 bytes          [emitted]

果然，亲切的css文件赫然在列~

VUE当采用异步加载组件的时候，打包时会把他这个组件里的所有代码都扔到一个js里，然后在需要时加载。