Как можно собрать npm-пакет, содержащий несколько css-файлов и используемый как напрямую, так и в виде подключаемого пакета?
Из формулировки вопроса, скорее всего, не совсем понятно, о чём речь, поэтому поясню на более человеческом языке.
- прямое подключение файлов (js, css) на странице сайта и inline-инициализация плеера;
- подключение минифицированного файла как внешнего пакета в рамках другой сборки и использование его интерфейса.
И вот тут я задаюсь вопросом: чем лучше всё это собирать?
Пока не появилось необходимости подключать всё это как пакет, для сборки использовался grunt и все были счастливы. Но ни пляски с бубном, ни заклятия не помогли при попытке затащить этот пакет с помощью webpack’а в основной проект: класс обёртки упорно не виден. (На стороне grunt’а используется babel+browserify, при подключении минифицированного js’а напрямую на странице всё хорошо.)
Удалось собрать силами того же webpack’а с указанием в output параметра library. В итоге сборка хорошо работает и при прямом подключении на странице, и в виде пакета. Но сильно смущает одно обстоятельство: для того, чтобы сгенерить css-файлы, пришлось прописать для них отдельные entry, и на каждый css-файл создаётся свой js-файл (разумеется, формальный, потому что исходного js’а для него нет). Жить они мне не мешают, но глядя на них я понимаю, что что-то делаю неправильно. Можно, конечно, собирать css отдельной командой, или удалять лишний js после сборки. Но, возможно, есть более правильное решение.
Собственно, хочется спросить совета у знающих людей — как бы вы решали эту задачу?
Подключение CSS файлов к проекту на Laravel с помощью Webpack
По аналогии с тем, как можно подключить один или несколько файл с JavaScript скриптами, точно также можно подключать и CSS файлы к проекту на Laravel с помощью Webpack. Это позволит поднять качество генерируемых странниц сайта в плане SEO за счёт уменьшения количества запросов к нескольким файлов со стилями. При подключении нескольких файлов с CSS стилями важно соблюдать порядок их подключения, так как нужно помнить, что любое свойство с одинаковым приоритетом в CSS перепрописывает предыдущее. Хотя вообще нужно стараться не дублировать свойства так, чтобы они перепрописывали друга дружку, но обычно на больших проектах за такими «пустяками» сложно уследить, находя нужное свойство в каком-то отдельном файле. Всегда проще перепрописать (что не правильно, но реально проще, если в проекте есть масса модулей от разных разработчиков, которые используют свои собственные стили).
Node.js и NPM
Итак, для того, чтобы собирать все CSS файлы в один общий файл (или несколько отдельных для разных типов страниц), нужно иметь доступ к командной строки на сервере, и что на сервере установлены Node.js и NPM. Для того, чтобы проверить, установлен ли Node.js можно воспользоваться командой:
, которая выведет версию установленной Node.js. И командой:
, которая выведет версию пакета NPM, установленного на сервере.
Если при этих запросах (или хотя бы в одном) выдаётся ошибка о том, что данная команда не найдена, это значит, что скорее всего эти пакеты не установлены на сервере и их нужно установить.
Подготовка файлов со стилями CSS к переносу в проект
Для того, чтобы не создавать хаос у себя на сервере, все файлы, относящиеся к проекту лучше хранить в папке /resources , которая уже создана при установке Laravel. В эту папку вложена папка css , в которую и нужно складывать все файлы со стилями CSS, которые нужны для работы с проектом. Если эти файлы нужно разделить на группы, можно сделать вложенные папки. Полный путь до папки со стилями CSS относительно корня папок проекта будет:
У меня сразу после установки в этой папке лежит пустой файл app.css . Именно его и подключим к проекту, хотя имя файла может быть любым.
webpack.mix.js — файл для указания того, что будет входить в сборку CSS свойств элементов страниц проекта на Laravel
После того, как файл со стилями CSS подготовлен, его требуется перенести в папку public проекта, которая служит корневой папкой для сайта.
Для этого нужно отредактировать файл webpack.mix.js , который находится в корневой директории проекта.
Для подключения одного файла CSS к проекту нужно в этом файле webpack.mix.js прописать команду:
- resources/css/app.css — это файл, который требуется подключить к проекту (с полным путём к нему)
- public/css/moonbase.css — это файл, куда требуется перенести данный файл (с указанием пути, куда переносим и названием файла, куда будут складываться все стили CSS)
Сборка файла с CSS стилями для публикации на сайте Laravel
Для того, чтобы перенести файл с нашими CSS стилями в папку проекта, нужно выполнить в консоли сервера из корня проекта команду:
Для сборки в режиме «продакшен» (без лишних символов в одну строку), используйте команду:
В результате получим отчёт:
Компиляция нескольких файлов со CSS стилями в проект Laravel
Для компиляции нескольких файлов со CSS стилями в проект Laravel в файле webpack.mix.js в качестве первого аргумента можно передавать массив с именами файлов, которые требуется подключить в проект, например:
Подключение скомпилированного файла с CSS стилями к проекту Laravel
Всё, что осталось сделать, это в шаблон сайта вписать подключение скомпилированного файла с CSS стилями (или нескольких файлов в зависимости от функционала страниц проекта).
Это делается в пределах контейнера <head> :
После этого все подключенные CSS стили должны начать работать после перезагрузки страницы проекта.
Заберите ссылку на статью к себе, чтобы потом легко её найти!
Выберите, то, чем пользуетесь чаще всего:
Использование import для подключения нескольких файлов в CSS
Как уже упоминалась в предыдущих статьях, к одному файлу HTML можно подключать несколько файлов CSS с прописанием стилей. Данная процедура относится к понятию таблицы внешних стилей, а тег, с помощью которого формировалась система взаимосвязи HTML и CSS — link. Для примера рассмотрим следующую запись кода:
Данное разделение оформления сайта на несколько файлов приносит выгоду только в частном случае. Это действенно, если для практически идентичных элементов сайта нужно разное оформление.
Самой негативной чертой использования данного подхода является то, что растет количество обращений к серверу из-за наличия нескольких файлов CSS, что приводит к повышению трафика и роста времени обработки информации.
Однако, если все же пришлось использовать данную систему присвоения стилей, то стоит поговорить об операторе @import и его возможностях и функционале.
Объединение нескольких файлов CSS с import
Для опытного веб мастера не секрет, что в CSS-файлах нельзя использовать кодировку HTML. Следовательно пользоваться тегом < link > следует только в рамках файлов с расширением html внутри тега .
В то время как оператор @import осуществляет взаимосвязь файлов стиля и основного контента в файле с расширением css. Указанное содержимое этой директивы связывается с тем css-файлом, в котором сдержится этот самый @import.
Синтаксис
Разберем данную запись. Первым в import указан url (относительный, или абсолютный) требуемого файла, который более удобен для веб-мастера.
Далее следует разновидность устройства. Ее указание не является принципиально обязательным, а соответствует она атрибуту media в случае использования тегов link.
Далее следует более конкретный пример:
Некоторые полезные замечания
- Директива @import должна располагаться в самом начале css-файла. Причем принципиально, чтобы команды оформления были строго после директивы. Иначе робот не сможет считать данную команду.
- Также стоит отметить тот факт, что невозможно использовать директиву @import для конструкции встроенных стилей.
Структура создания CSS по блочной методике может осуществляться двумя путями:
- связь файлов контента и файлов оформления посредством тега < link >
- объединение таблиц внешних стилей в рамках одного файла с расширением css.
Блочную методику целесообразно использовать в том случае, когда с кодом работают несколько специалистов. Объединение стилей в один документ способствует сокращению времени обработки информации роботом.
Is it possible to include one CSS file in another?
Yes. Importing CSS file into another CSS file is possible.
It must be the first rule in the style sheet using the @import rule.
The only caveat is that older web browsers will not support it. In fact, this is one of the CSS ‘hack’ to hide CSS styles from older browsers.
Refer to this list for browser support.
The @import url(«base.css»); works fine but bear in mind that every @import statement is a new request to the server. This might not be a problem for you, but when optimal performance is required you should avoid the @import .
The CSS @import rule does just that. E.g.,
The rule is documented here.
In some cases it is possible using @import «file.css», and most modern browsers should support this, older browsers such as NN4, will go slightly nuts.
Note: the import statement must precede all other declarations in the file, and test it on all your target browsers before using it in production.
yes it is possible using @import and providing the path of css file e.g.
That is the best way to include a css stylesheet within a css stylesheet using css.
The «@import» rule could calls in multiple styles files. These files are called by the browser or User Agent when needed e.g. HTML tags call the CSS.
CSS File «main.css» Contains The Following Syntax:
To insert in style element use createTexNode don’t use innerHTML but:
Import bootstrap with altervista and wordpress
I use this to import bootstrap.css in altervista with wordpress
and it works fine, as it would delete the html link rel code if I put it into a page
As opposed to the best answer, it is not recommended to aggregate all CSS files into one chunk when using HTTP/2.0
I have created main.css file and included all css files in it.
We can include only one main.css file
Yes You can import easily one css to another (any where in website) You have to use like:
sing the CSS @import Rule here
For whatever reason, @import didn’t work for me, but it’s not really necessary is it?