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

                               Asset       Size  Chunks                    Chunk Names
3f088e105cd24828c4d81390cf0d9522.png    25.5 kB          [emitted]
                                0.js    18.3 kB       0  [emitted]
                                1.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里,然后在需要时加载。

Logo

前往低代码交流专区

更多推荐