Как мне загрузить CSS для flatpickr, когда я использую npm для его установки в Laravel? - PullRequest
Новая
       16

Как мне загрузить CSS для flatpickr, когда я использую npm для его установки в Laravel?

3 голосов
/ 07 марта 2019

У меня есть проект Laravel, и я пытаюсь использовать в нем flatpickr, как показано на следующей странице:
https://flatpickr.js.org/getting-started/

Я смог установить flatpickr через npm i flatpickr --save и правильно импортировать его в код JS и использовать его через import flatpickr from "flatpickr";, но у меня вопрос: как мне также включить CSS в проект?

Я использовал следующий тег HTML link, указанный в ссылке на документацию flatpickr выше: 

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">

Но мне интересно, есть ли лучший способ включить CSS для flatpickr в мой проект.

То есть, когда вы используете npm для установки пакета и импорта его в JS, есть ли что-то похожее для CSS, или мы должны включить CSS с использованием традиционного тега link, и это наш единственный вариант?

Я не смог найти что-либо в документации или через Google о том, как это сделать, поэтому мне действительно интересно. Благодаря.

1 Ответ

1 голос
/ 07 марта 2019

webpack.mix.js 

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

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.js(['resources/js/app.js', 'node_modules/flatpickr/dist/flatpickr.js'], 'public/js')
    .sass('resources/sass/app.scss', 'public/css')
    .stylus('node_modules/flatpickr/src/style/flatpickr.styl', 'public/css');

пробег npm run dev

приводит к js/app.js и css/flatpickr.css

... или вы можете просто добавить

@import '~flatpickr/dist/flatpickr.css';

до

resources/sass/app.scss

и запустить

npm run dev

Тогда вы получите все свои css (Bootstrap / flatpickr) в одном файле public/css/app.css

...