Laravel Mix的提取方法为什么会导致Sass在这种情况下无法编译？

Question

我有一个使用Laravel Mix，Vue.js和Sass的Laravel项目。以下是项目中webpack.mix.js文件的内容：

 const mix = require('laravel-mix');

 mix.js('resources/js/app.js', 'public/js')
    .extract(['vue'])
    .sass('resources/sass/vendor.scss', 'public/css/')
    .sass('resources/sass/app.scss', 'public/css/');

当我将所有Vue组件导入名为App的主Vue组件时，如下所示，此Mix文件正在为我正确编译所有CSS和JS资产：

// Layout
import SiteFooter from './layout/SiteFooter';
import SiteHeader from './layout/SiteHeader';

// Pages
import Home from './pages/Home';
// And many more here...

export default {
    components: {
        SiteFooter,
        SiteHeader,

        // Pages
        Home,
        // etc...
    }

但是，当我开始创建很多组件时。 app.js开始变得太大，所以我切换到异步地在App中加载组件，如下所示：

// Layout
import SiteFooter from './layout/SiteFooter';
import SiteHeader from './layout/SiteHeader';

export default {
    components: {
        SiteFooter,
        SiteHeader,

        // Pages
        Home: () => import('./pages/Home'),
        // And many more here...

这完美地实现了减小app.js大小并将组件分解为单独文件的目标，这很好，但是一旦我这样做，Sass便停止了编译为app.css和vendor.css文件，而且我的网站上没有样式。

我玩了一会儿，意识到如果我从extract(['vue'])中删除了webpack.mix.js行，那么Sass将再次正确编译并且样式将正确显示，但是app.js的大小将增加330k因为包含了Vue代码。

[我想知道的是：为什么在Mix文件中调用extract(['vue'])方法并在Vue中使用异步组件会导致Sass无法编译，更重要的是，有没有办法提取Vue代码导出到单独的vendor.js文件中，以及在异步加载Vue组件时让Sass正确编译？谢谢。

Answer 1

您解决了这个问题吗？我也有类似的情况。看我的问题：laravel.mix does't compile scss files