Webpack / npm - Как установить jquery, bootstrap и boostrap-таблицы


Webpack / npm - Как установить jquery, bootstrap и boostrap-таблицы

31.10.2020 01:15:26 Просмотров 71 Источник

У меня есть проект с laravel7, использующий блейд-шаблоны, и в данный момент я использую webpack, и я получаю ошибку компиляции, которую показываю в конце поста.

Файл webpack.mix.js

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

mix.js([
    'resources/assets/js/app.js',
    'resources/assets/vendor/popper/popper.min.js',
    'resources/assets/vendor/bootstrap/bootstrap.min.js',
    'resources/assets/vendor/bootstrap/bootstrap.bundle.min.js',
    'resources/assets/vendor/boostrap-table/bootstrap-table.min.js',
    'resources/assets/vendor/boostrap-table/bootstrap-table-es-ES.min.js',
], 'public/js/app.js')
    .sass('resources/assets/sass/app.scss', 'public/css/app.css');

Файл app.js

    require('./bootstrap');

Приложение файл.СКС

@import "../vendor/bootstrap/bootstrap.min.css";
@import "../vendor/boostrap-table/bootstrap-table.min.css";
@import '../../../node_modules/@fortawesome/fontawesome-free/scss/fontawesome';
@import '../../../node_modules/@fortawesome/fontawesome-free/scss/regular';
@import '../../../node_modules/@fortawesome/fontawesome-free/scss/solid';
@import '../../../node_modules/@fortawesome/fontawesome-free/scss/brands';
@import "style";


@import "../vendor/twitter-boostrap/bootstrap.css";
@import "../vendor/twitter-boostrap/bootstrap-datetimepicker.css";

Эти последние две строки - это те, которые дают мне сбой при выполнении npm run watch Ошибка, которую я получаю, заключается в следующем

ERROR in ./resources/assets/vendor/twitter-boostrap/bootstrap.css 
(./node_modules/css-loader/dist/cjs.js??ref--5-2!./node_modules/postcss-loader/src??
postcss0!./resources/assets/vendor/twitter-boostrap/bootstrap.css)
Module build failed (from ./node_modules/css-loader/dist/cjs.js):
Error: Can't resolve '../fonts/glyphicons-halflings-regular.eot' in 
'C:\Apache24\htdocs\laravel\resources\assets\vendor\twitter-boostrap'
У вопроса есть решение - Посмотреть?

Ответы - Webpack / npm - Как установить jquery, bootstrap и boostrap-таблицы / Webpack / npm - How to install jquery, bootstrap and boostrap-tables

Является ответом!
Rok Sprogar

31.10.2020 04:17:16

Скорее всего, mix вызывает ошибку, потому что url-путь для шрифта не является абсолютным. Ты должен попробовать это.

.sass('resources/assets/sass/app.scss', 'public/css/app.css')
.options({
    processCssUrls: false
});

Более подробная информация здесь: https://laravel.com/docs/8.x/mix#url-processing

Помочь в развитии проекта:
Закрыть X