Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 07.06.2019, 18:47
Профессор
Отправить личное сообщение для smart-create Посмотреть профиль Найти все сообщения от smart-create
 
Регистрация: 25.10.2016
Сообщений: 157

Подключение css в webpack
Доброго времени суток. Коллеги прошу помочь или дать толчек, начал разбираться с webpack, есть существенно не понимание того как он работает с css

1) Непонимание №1. Подключение сss в webpack.
Я следуя гайду на хабре, разобрался с основами, добрался до подключения css, делаю все как написано в гайде, настраиваю конфиг вебпака, подключаю цсс файл внутри своего входного js файла через require, все проходит успешно, бандл запускается, все хорошо, но вот дальше не понимаю..., ну подключил я цсс файл в webpack, в index.html он не как не подключился, следовательно не работает. От сюда возникает вопрос - зачем тогда это все нужно, зачем цсс подключать в входном файле js? или я все таки что-то не так сделал и цсс каким-то магическим образом должен был подключится в index.html

2) Непонимание №1. Как быть с плагинами
Например slick-carousel - наверное самый популярный плагин для создания слайдеров. Не мудренно что он состоит из библиотеки написанной на JQ и файла css. C первой частью проблем не каких - идем в входной файл js, пишем require и подключаемся по название плагина, который ранее загрузили c npm. Но как теперь быть со стилями, файл то css не куда не подключается при этом?

Может быть данные вопросы покажутся слишком глупыми, но мне стеснятся нечего)) глухое непонимание куда хуже какой либо глупости)

Искренне прошу любого совета или объяснения
Ответить с цитированием
  #2 (permalink)  
Старый 07.06.2019, 20:18
Аватар для destus
Профессор
Отправить личное сообщение для destus Посмотреть профиль Найти все сообщения от destus
 
Регистрация: 18.05.2011
Сообщений: 1,207

Еще нужно style-loader и css-loader подключить, чтобы стили писались inline в head. Ну или extract-css, чтобы отдельным файлом. Второй вопрос решится после решения первого.
Ответить с цитированием
  #3 (permalink)  
Старый 08.06.2019, 12:34
Профессор
Отправить личное сообщение для smart-create Посмотреть профиль Найти все сообщения от smart-create
 
Регистрация: 25.10.2016
Сообщений: 157

destus, добрый день, спасибо что откликнулись. Вчера с горем по полам разобрался с этими вопросами, но возникли новые, и буду очень благодарен за помощь с ними.

Cамое насущное - получается проблема после компиляции всего проекта. У меня простой тестовый проект, к нему подключены 2 простеньких плагина на JQ которые использую свои шрифты и некоторые изображение (их я устанавливаю с помощью npm) + использую изображения и шрифты которые сам загрузил для этого проекта.
Мои изображения и шрифты находятся в папках library/img и library/fonts соответственно, а то что идет вместе с плагинами находится где-то в node_modules

Все эти картинки и шрифты используются в scss и подключается по средствам ur(../)

В чем суть проблемы - после того как мой проект компилируется, он создают результирующие файлы .js и .css в папке dist, а картинки и шрифты которые они пытаются подключить лежат уже совершенно в другой папке, они остались в папке library. В результате не сложно предугадать что все мои подключения через ur(../) теперь не работаю и дают 404 ошибку.

Очевидное решение - нужно сделать так что бы все изображения и шрифты которые используются в моем файле scss также как и файлы .js и .css отправлялись в папку dist, в процессе компиляции.

Что я пытаюсь для этого сделать:
1) установил file-loader
2) в конфиге вебпака пишу следующее:

//...
module: {
    rules: [
         //...
         {
              test: /\.(png|jpg|gif|svg)$/,
              loader: "file-loader?name=/img/[name].[ext]"
         },{
              test: /\.(woff|woff2|ttf|eot)$/,
              loader: "file-loader?name=/fonts/[name].[ext]"
         }
         //...
    ]
}
//...


Но чуда не происходит, компиляция происходит успешно, .js и .css файлы обновляются в папке dist но не изображения не шрифты там не появляются((

Подскажите пожалуйста, что делаю не так?
Ответить с цитированием
  #4 (permalink)  
Старый 08.06.2019, 18:27
Аватар для destus
Профессор
Отправить личное сообщение для destus Посмотреть профиль Найти все сообщения от destus
 
Регистрация: 18.05.2011
Сообщений: 1,207

smart-create,
Должны файлы из library перенестись в dist/img и dist/fonts. Если этого не происходит, то нужен более полный анализ. Есть скринкаст, там и file-loader используется, посмотрите http://learn.javascript.ru/screencast/webpack
Ответить с цитированием
Ответ


Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
при подключение стороннего CSS для календаря, вся верстка падает Шико Первый (X)HTML/CSS 2 25.10.2018 22:32
loading css by requirejs in webpack sealmu Сборка проекта, утилиты 0 22.09.2017 01:36
Подключение css bartle96 Элементы интерфейса 13 27.07.2013 19:03
Подключение другого CSS при выводе через IFRAME Smokvin Events/DOM/Window 7 16.07.2012 12:03
Подключение CSS через <link> Vit (X)HTML/CSS 8 27.05.2012 02:40