Лучшая практика для VueJs с использованием смеси laravel и размещения app.js с bootstrap и app.css из sass

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

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

Проблема в том, что мой app.js находится внизу страницы, а мой размещенный app.css, сгенерированный из sass, находится в заголовке, поэтому bootstrap берет на себя все стили, которые я написал, чтобы переопределить 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 начальной загрузки?


laravel vuejs2 sass bootstrap-4 laravel-mix
person Dylan Glockler    schedule 07.01.2019    source источник
comment
Просто добавьте @import '~bootstrap/scss/bootstrap'; в начало resources/sass/app.scss. Таким образом не нужно импортировать CSS на стороне JavaScript.   -  person ceejayoz    schedule 07.01.2019

Ответы (1)


arrow_upward
1
arrow_downward

Вам просто нужно сделать следующее в файле 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 уже находится в файле микса и компилируется.

person utdev    schedule 07.01.2019
comment
Клянусь, я пробовал это однажды, но, должно быть, у меня был неправильный путь к начальной загрузке. Спасибо за быстрый и безупречный ответ. - person Dylan Glockler; 08.01.2019