Почему метод извлечения Laravel Mix заставляет Sass не компилироваться в этом случае? - PullRequest
Новая
       65

Почему метод извлечения Laravel Mix заставляет Sass не компилироваться в этом случае?

1 голос
/ 06 января 2020

У меня есть проект Laravel с использованием Laravel Mix, Vue. js и Sass.
Ниже приведено содержимое файла 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/');

Этот файл Mix правильно компилирует все активы CSS и JS для меня, когда я импортирую все свои Vue компоненты в основной компонент Vue с именем App следующим образом: 

// 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 увеличился бы в размере примерно на 330 КБ из-за включения код Vue.

Что мне интересно: почему вызов метода extract(['vue']) в файле Mix вместе с использованием асинхронных компонентов в Vue приводит к тому, что Sass не компилируется, и что еще более важно, есть ли способ вытащить код Vue в отдельный файл vendor.js, а также заставить Sass правильно скомпилировать, когда компоненты Vue асинхронно загружается? Спасибо.

...