对于想在 Laravel 项目中提取 Vue 组件中的 CSS 样式到一个文件中，laravel-mix 的文档写得很简单，只需要添加一行配置项即可：
mix.options({
extractVueStyles: true
});
然而在实际开发中，我还是遇到了问题。
如果你的Vue组件是全局注册并且是同步加载的：
Vue.component('example', require('./components/Example.vue'));
那么配置好 extractVueStyles: true 就基本可以了。只不过如果你在某一个组件的 <script> 标签中通过 import 的方式引入了CSS样式，那么这部分样式最终还是会注入到 html 页面的 <style> 标签中。
比如我项目中用到了一个社交分享组件，最终 client.css 里面的内容还是无法单独提取出来：
import Share from "vue-social-share";
import "vue-social-share/dist/client.css";
export default {
components: {
Share
},
data() {
return {
shareConfig: {
sites: ["qq", "qzone", "weibo"]
}
};
}
};
这只是遇到的第一个问题。其次，由于为了减少白屏时间，我在项目中使用了异步组件的加载方式，这下子上面的方法几乎就行不通了。
Vue.component('example', () => import('./components/Example.vue'));
这里多说一句，使用异步组件必须安装 babel-plugin-syntax-dynamic-import 插件，然后在项目根路径下新建一个 .babelrc 文件添加配置：
{
"plugins": ["syntax-dynamic-import"]
}
其实，这两个CSS提取不完整的问题的根本原理是一致的，最终我还是在 vue-cli 的源码中找到了 ExtractTextPlugin 插件，看一下 allChunks 的定义就很容易明白了：
new ExtractTextPlugin({
filename: utils.assetsPath('css/[name].[contenthash:8].css'),
// Setting the following option to `false` will not extract CSS from codesplit chunks.
// Their CSS will instead be inserted dynamically with style-loader when the codesplit chunk has been loaded by webpack.
// It's currently set to `true` because we are seeing that sourcemaps are included in the codesplit bundle as well when it's `false`,
// increasing file size: https://github.com/vuejs-templates/webpack/issues/1110
allChunks: true,
}),
原来是 laravel-mix 设计本身的问题，没有配置这个 allChunks，所以必须需要通过修改源码的方式来修复。
找到 node_modules\laravel-mix\src\components\Vue.js 文件中的 extractPlugin 方法，传递一个对象给构造函数，并加上一条 allChunks: true 直接搞定！
extractPlugin() {
if (typeof Config.extractVueStyles === 'string') {
// return new ExtractTextPlugin(this.extractFilePath());
return new ExtractTextPlugin({
filename: this.extractFilePath(),
allChunks: true,
});
}
// ...
注：一般选择在生产环境下提取CSS即可。
