Лучшая практика для VueJ с использованием laravel mix и Placeing app.js с начальной загрузкой и app.css от sass - PullRequest
Новая
       22

Лучшая практика для VueJ с использованием laravel mix и Placeing app.js с начальной загрузкой и app.css от sass

0 голосов
/ 07 января 2019

Я пытаюсь найти лучший способ для этого, я загрузил загрузчик в мой app.js, используя строку 

import 'bootstrap/dist/css/bootstrap.css';

Проблема в том, что мой app.js находится внизу страницы, а мой файл app.css, сгенерированный из sass, находится в заголовке, поэтому bootstrap принимает все стили, которые я написал, для перезапуска начальной загрузки.

В голове шаблон моего макета laravel: 

<link href="{{ asset('css/app.css?v=1.5') }}" rel="stylesheet">

и в нижнем колонтитуле: 

<script src="{{ asset('js/app.js?v=1.5') }}"></script>

Какая лучшая практика? Должен ли я как-то смешивать в загрузочном css с использованием sass - я попытался найти это как решение без удачи. Или, может быть, я также перенес свой собственный CSS в свой js - я попробовал это, но файл начальной загрузки, который я объединяю, приходит из моего исходного репозитория, и app.css генерируется в публичный каталог.

Я, очевидно, немного новичок в этом, и я просто пытаюсь выбрать лучший способ, работая с Laravel, mix и VueJs.

Вот мой файл микса: 

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

mix.js('resources/assets/js/app.js', 'public/js')
 .sass('resources/assets/sass/app.scss', 'public/css');

mix.autoload({
  jquery: ['$', 'window.jQuery', 'jQuery'],
  'popper.js/dist/umd/popper.js': ['Popper']
})

mix.autoload({
    'jquery': ['$', 'window.jQuery', 'jQuery'],
    'vue': ['Vue','window.Vue'],   
    'moment': ['moment','window.moment'],   
  })

Как правильно сделать это, чтобы мой css был после и, следовательно, имел приоритет над загрузочным css?

1 Ответ

0 голосов
/ 07 января 2019

Вы просто должны сделать следующее в вашем файле app.scss:

// Bootstrap @import '~bootstrap/scss/bootstrap';

Это загрузит зависимости стиля начальной загрузки, которые вы можете использовать по своему усмотрению, если вы хотите перезаписать какой-либо стиль, вы можете создать новый файл и импортировать его в свой файл scss в главном файле начальной загрузки.

Например, вы создаете этот файл внутри resources/sass/_custom_bootstrap.scss

теперь вы импортируете это в ваш app.scss так: 

...
// Bootstrap
@import '~bootstrap/scss/bootstrap';


// custom
@import 'custom_bootstrap';
...

Вам не нужно добавлять файл в ваш микс, так как app.scss уже находится в файле микса и компилируется.

...