Laravel - добавление пользовательских стилей в существующий app.scss

Question

Я новичок в Laravel и прочитал несколько других вопросов о Stackru о добавлении пользовательских стилей в Laravel.

Причина, по которой я создаю новый вопрос stackru, заключается в том, что Laravel, похоже, компилирует один app.css, который также загружает загрузчик. Я думаю, что это создается путем запуска npm run dev, который составляет app.scss в resourcessass папка.

В этот файл загружается загрузчик @import '~bootstrap/scss/bootstrap'; Я бы тоже хотел следовать этому принципу в своем собственном стиле, чтобы я мог что-то сделать @import '~mywebsite.css';

Таким образом, я получу единственный файл.css, который, как мне кажется, гораздо более красноречивый.

Как правильно это сделать? Кроме того, где находится этот стиль начальной загрузки, который импортируется? Я не понимаю, где находится ~.

И последнее, но не менее важное: возможно ли использовать тот же подход для app.js файл?

С уважением,

• цыпленок

Answer 1

Вы можете создать новый файл sass в /resources/sass, например _test.sass, и поместить импорт в app.sass следующим образом:

@import 'test';

и скомпилируйте с помощью npm run dev или npm run watch

если вам нужно создать новый файл в вашей общей папке, вы можете создать новый файл sass (example.sass), а затем изменить файл webpack.mix.js и поместить новую строку css следующим образом:

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

и скомпилируйте с помощью npm run dev.

С уважением!