vue单个文件中的css能和其他样式文件一样,提取到一个单独的css文件中吗?

Question

webpack中使用ExtractTextPlugin插件,可以把css文件打包成一个单独的文件, 但是.vue文件中有大量的css, 这些文件中的css能打包到一个.css文件中吗?

补充一下为什么要把样式拆分出来,

1. webpack会把component中的css打包到一个js文件中,我认为样式文件打包到js文件中并不一个很好的方式,这样不仅增加js文件的体积, 还会浪费CPU资源

2. 项目中会用到一个common.css文件,如果使用ExtractTextPlugin, 只是拆出这一个css来单独引用的话, 体积小, 浪费一次HTTP链接, 并没有太大的意义, 如果能把.vue中的样式, 也拆分出来, 这个拆出来的css来单独引用, 这样的意义会大很多

3. 单独拆分出来的css文件会放到html的头部引用, 这样不会出来HTML的DOM已经加载完, 但是样式还没加载的问题

Answer 1

都抽离出来了的

Answer 2

只想问你为啥要抽离？？？
如果嫌弃文件大可以借助 sass、less 进行文件拆分整合。
如果嫌弃样式重复那就是你的 css 架构没规划好，得重新规划了。

Answer 3

看一下 vue-cli 的 webpack 项目模板中的 webpack.prod.config.js，里面有 ExtractTextPlugin 插件用于提取 css，在 webpack 配置对象中有一个 vue 对象，是 vue-loader 加载器的高级设置，可以指定 css 使用 ExtractTextPlugin 提取的。
可以到这儿看一下：https://kingmario.github.io/v...