Как запустить css

Как вставить файл CSS в HTML

wikiHow работает по принципу вики, а это значит, что многие наши статьи написаны несколькими авторами. При создании этой статьи над ее редактированием и улучшением работали, в том числе анонимно, 12 человек(а).

Количество просмотров этой статьи: 14 862.

В этой статье:

Язык гипертекстовой разметки (HTML) определяет, какие элементы присутствуют на веб-странице. Язык программирования «Каскадные таблицы стилей» (CSS) описывает, как должны выглядеть эти элементы. Файл CSS можно добавить в HTML в качестве внешней (CSS добавляют в виде отдельного файла) или внутренней таблицы стилей (CSS включают в файл HTML). Узнайте, как вставить в HTML файл CSS, чтобы изменить дизайн сайта.

Метод 1 из 2:

Как уставить внешнюю таблицу стилей

Создайте файл CSS. Подготовьте и сохраните файл CSS с расшиернием «.css».

Загрузите файл CSS на сайт.

• Хорошей практикой является удаление из адреса (URL) основного имени домена. Исходя из этого, адрес http://мойсайт.com/css/default.css будет сокращен до «/css/default.css». Не забудьте включить ведущий слэш («/»). Он называется относительным путем.

Вставьте в файл ссылку. Найдите в файле HTML метку и создайте пустую строку прямо над ней. Вставьте в эту строку , заменив «www.ваш. » на ссылку в файле CSS.

Сохраните файл HTML и загрузите его на сайт.

Убедитесь, что на сайте все выглядит так, как и должно выглядеть. В противном случае снова откройте файл HTML, найдите ошибки и внесите изменения.

Метод 2 из 2:

Как вставить внутреннюю таблицу стиля

Создайте метку . Откройте файл HTML и найдите метку . Добавьте над ней несколько пустых строк и введите следующее:

STYLE type="text/css"> STYLE> 

Вставьте все свои CSS между этими двумя метками.

Сохраните файл HTML (с расширением .HTML).

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

• Всегда проверяйте внешний вид сайта в разных браузерах и на разных операционных системах. Некоторые браузеры подключаются к CSS немного по-разному. Это даже может произойти в одном и том же браузере, но на разных версиях Mac и Windows. Если в другом браузере ваш сайт выглядит иначе (например, промежуток между некоторыми объектами, такими как списки, имеет другой размер), тогда проблема заключается в настройках этого браузера. Найдите таблицу мастер-стилей и вставьте ее в начало файла CSS, чтобы изменить стандартные настройки браузера. Это делается для того, чтобы ваши настройки ничего не меняли в самом браузере.
• Вставьте внешнюю таблицу стилей, если у вас есть такая возможность. Это позволит вам менять внешний вид сайта, изменяя код в исходном файле. Так вам не придется менять CSS на каждой странице сайта.
• Если сайт не реагирует на CSS так, как вы того ожидали, перепроверьте всю кодировку, чтобы удостовериться в правильности ее написания. В частности, уделите особое внимание точкам с запятыми («;») и закрывающимся скобкам («>»). В CSS файле довольно просто пропустить один из этих символов.
• Сохраните файл HTML на компьютер, чтобы потом открыть его в различных веб-браузерах и перепроверить его внешний вид перед дальнейшей загрузкой. Но чтобы его загрузить, файл CSS необходимо вставлять в HTML в качестве внешней таблицы стилей.
• Если таблица стилей сама себе противоречит – например, сначала в ней говорится, что текст будет синим, а затем, что он будет красным – выполняться всегда будет последнее условие. Если одна команда представляет собой внешнюю таблицу стилей, а другая – внутреннюю, активной будет внутренняя таблица.

Предупреждения

• Не используйте «открытую» постановку CSS, то есть CSS, который включен в метку HTML. (Пример: «align=’center’» является открытой постановкой CSS). Это устаревший вариант с плохой синтаксической конструкцией. Если через некоторое время вам придется обновлять сайт, эту постановку будет трудно изменить.

Открытие средств разработки и браузера DevTools

Открыть вкладку DevTools и вкладку Edge DevTools: Browser можно несколькими способами :

Способ	Описание
Щелкните файл правой кнопкой .html мыши.	Файл не launch.json используется. Открывает средства разработки в режиме отладки. Используйте этот подход, если вы хотите выполнить отладку, а веб-приложение может работать из файловой системы, а не из веб-сервера.
Нажмите кнопку Запустить экземпляр .	Файл не launch.json используется. Открывает средства разработки в режиме без отладки. Используйте этот подход, если не хотите выполнять отладку.
Нажмите кнопку Запустить проект .	Используется launch.json файл. Открывает средства разработки в режиме отладки. Используйте этот подход, если вы хотите выполнить отладку, а веб-приложение использует ИНТЕРФЕЙСы API, требующие запуска на веб-сервере.

Эти подходы описаны ниже. Подробные инструкции по использованию репозитория демонстраций см. в статье Начало работы с расширением DevTools для Visual Studio Code.

Открытие средств разработки путем щелчка правой кнопкой мыши HTML-файла

Этот подход открывает вкладки DevTools в режиме отладки и рекомендуется, если веб-страница не требует запуска на веб-сервере, как в некоторых API.

Чтобы открыть средства разработки и встроенный браузер, а также панель инструментов Отладка ДЛЯ HTML-файла на жестком диске:

1. В Visual Studio Code выполните одно из следующих действий.
   • Выберите Панель> действий Обозреватель () > нажмите кнопку Открыть папку.
   • Выберите Файл>Открыть папку.
   • Выберите Файл>Открыть последние.
2. Откройте папку, содержащую исходные файлы веб-приложения.
3. В Visual Studio Code в Обозреватель щелкните файл правой .html кнопкой мыши, выберите Открыть с помощью Edge, а затем выберите Открыть браузер с помощью средств разработки: Откроется devTools с Visual Studio Code в режиме отладки: В Visual Studio Code открыты следующие компоненты:
   • Вкладка Edge DevTools , включая вкладку Элементы и другие вкладки инструментов.
   • Вкладка Edge DevTools: Браузер , включая панель инструментов Эмуляции устройства в нижней части экрана.
   • Панель инструментов Отладка в верхней части, включая такие кнопки, как Пауза, Шаг с обходом, Шаг в начало, Сброс и Остановка.
   • Консоль отладки внизу.
   • Боковая панель Выполнить и Отладка (аналогично выбору просмотреть>выполнение).

При таком подходе экземпляр отсутствует в списке Целевыеобъекты инструментов >Microsoft Edgeпанели > действий.

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

На вкладке Edge DevTools: Browser (Средства разработки для Edge: браузер ) есть панель инструментов эмуляции устройства. Эта вкладка содержит встроенный веб-браузер с функциями DevTools. Этот браузер иногда называют экранной трансляцией или браузером без головы для средств разработки.

Открытие средств разработки путем нажатия кнопки Запустить экземпляр

Этот подход открывает вкладки DevTools в режиме без отладки и полезен, если вы не хотите использовать панель инструментов Отладка.

При этом предполагается, что изначально папка не открыта в Visual Studio Code, а открываемая launch.json папка не содержит файла.

1. В Visual Studio Code выполните одно из следующих действий.
   • Выберите Панель> действий Обозреватель () > нажмите кнопку Открыть папку.
   • Выберите Файл>Открыть папку.
   • Выберите Файл>Открыть последние.

Чтобы использовать все функции DevTools, в том числе CSS зеркало редактирования локального исходного файла при редактировании CSS в DevTools, откройте папку, содержащую исходные файлы, соответствующие веб-странице, которая будет отображаться в DevTools.

На панели действий нажмите кнопку Инструменты Microsoft Edge ( и нажмите кнопку Запустить экземпляр : Если есть кнопка «Запустить проект» , а не кнопка «Запустить экземпляр «, это означает, что папка содержит launch.json файл. Проверьте, какой URL-адрес указан в launch.json файле, и попробуйте щелкнуть Запустить проект, как описано в разделе Открытие инструментов разработки, нажав кнопку Запустить проект. Или, если вы хотите узнать, как работает кнопка Запустить экземпляр , можно удалить launch.json файл и создать новый launch.json файл позже.

• Откроется вкладка Edge DevTools , изначально содержащая сведения о странице Успешное выполнение, например C:\Users\username\.vscode\extensions\ms-edgedevtools.vscode-edge-devtools-2.1.1\out\startpage\index.html .
• Откроется вкладка Edge DevTools: Browser (встроенный браузер), на которой изначально отображается страница Успешно .
• Панель инструментов отладки и пользовательский интерфейс отладки Visual Studio Code не открываются.
• В области Средства Microsoft Edge откроется раздел Целевые объекты , в котором указан целевой объект, а кнопка Запустить экземпляр будет удалена.

На вкладке Edge DevTools: Browser в адресной строке вставьте путь к файлу или URL-адрес, соответствующий папке, открытой в Visual Studio Code. Если вы хотите получить путь к файлу, в Обозреватель панели> действий Visual Studio Code > () > щелкните правой кнопкой .html мыши файл >Путь копирования. Если вы хотите вставить URL-адрес, ниже приведены примеры:

• http://localhost:8080
• http://127.0.0.1:8080
• http://10.0.1.8:8080

Аналогичные URL-адреса отображаются в командной строке при вводе (например) npx http-server для локального запуска веб-сервера.

Указанная веб-страница отображается на вкладке Edge DevTools: Browser (встроенный браузер). На вкладке Edge DevTools отображаются сведения о веб-странице.

Открытие средств разработки путем нажатия кнопки Запустить проект

Этот подход открывает вкладки DevTools в режиме отладки и рекомендуется, если веб-страница требует запуска на веб-сервере как с определенными API.

1. Откройте локальную папку, содержащую исходные файлы веб-приложения.
2. Нажмите кнопку Создать launch.json .
3. Добавьте URL-адрес localhost в .json файл.
4. Нажмите кнопку Запустить проект .

Предполагается, что вы используете веб-сервер localhost, как описано в разделе Шаг 6. Настройка сервера localhost в статье Установка расширения DevTools для Visual Studio Code.

Чтобы открыть средства разработки, нажав кнопку Запустить проект , выполните следующие действия.

Открытие локальной папки, содержащей исходные файлы веб-приложения

1. В Visual Studio Code выполните одно из следующих действий.
   • Выберите Панель> действий Обозреватель () > нажмите кнопку Открыть папку.
   • Выберите Файл>Открыть папку.
   • Выберите Файл>Открыть последние.

Выберите каталог, содержащий исходные файлы веб-страницы. Например, C:\Users\username\Documents\GitHub\Demos\demo-to-do\ .

На панели действий щелкните Инструменты Microsoft Edge (). Откроется панель Средства Microsoft Edge .

• Если папка еще не содержит .vscode каталог, содержащий launch.json file , на боковой панели инструментов Microsoft Edge есть кнопка Запуск экземпляра и кнопка Создать launch.json .
• Если папка уже содержит .vscode каталог, содержащий launch.json файл, на боковой панели инструментов Microsoft Edge есть кнопка «Запустить проект» , а не кнопка «Создать launch.json «. В этом случае может потребоваться проверить или изменить url строку в существующем launch.json файле, как описано ниже.

Нажмите кнопку «Создать launch.json»

1. Нажмите кнопку Создать launch.json : Откроется новый launch.json файл.

Добавление URL-адреса localhost в JSON-файл

1. В нескольких местах файла launch.json на каждой из «url» строк прокрутите страницу вправо и обратите внимание на комментарий :Укажите URL-адрес проекта, чтобы завершить настройку:

"url": "c:\\Users\\username\\.vscode\\extensions\\ms-edgedevtools.vscode-edge-devtools-2.1.1\\out\\startpage\\index.html", // Provide your project's url to finish configuring 

• http://localhost:8080
• http://127.0.0.1:8080
• http://10.0.1.8:8080

Аналогичные URL-адреса отображаются в командной строке при запуске сервера путем ввода npx http-server .

"url": "http://localhost:8080", // Provide your project's url to finish configuring 

Нажмите кнопку Запуск проекта

1. В Visual Studio Code на панели действий нажмите кнопку Средства Microsoft Edge (). Откроется панель Инструменты Microsoft Edge , содержащая кнопку Запустить проект (вместо кнопки Запустить экземпляр ), и больше не содержит кнопку Создать файл launch.json :
2. Нажмите кнопку Запустить проект . Вкладки Edge DevTools и Edge DevTools: Browser открываются в отдельных панелях, где отображается URL-адрес веб-приложения, указанный в launch.json :

Сопоставление файлов URL-адресов с открытой папкой

Если DevTools может сопоставить и установить сопоставление рабочей области между файлами, загруженными с сервера, и файлами в открытой папке, DevTools предоставляет все свои функции, включая CSS зеркало редактирование локальных исходных файлов при изменении CSS в DevTools.

Если DevTools не удается сопоставить файлы на вкладке Edge DevTools: Browser с файлами в папке, открытой в Обозреватель Visual Studio Code, вы можете просмотреть веб-страницы и изменить их, например изменить значения CSS на вкладке Источники инструмента Элементы на вкладке Средства разработки Edge. В этом случае, однако, вы не можете использовать CSS зеркало редактирования, чтобы средства разработки автоматически изменяли исходные файлы. Варианты:

• Снимите флажок CSS зеркало редактирования на вкладке Стили и продолжайте экспериментировать с изменениями CSS.
• Откройте папку, содержащую исходные файлы, соответствующие веб-странице.
• Предоставьте папке доверие, открыв ее в Visual Studio Code.

1. Откройте папку, которая находится в локальной копии репозитория Demos, например , как C:\Users\username\Documents\GitHub\Demos\demo-to-do\ описано в разделе Начало работы с расширением DevTools для Visual Studio Code.
2. Откройте DevTools, как описано выше.
3. На вкладке Edge DevTools: Браузер в адресной строке вставьте удаленный github.io URL-адрес, например https://microsoftedge.github.io/Demos/demo-to-do/. Файлы по указанному адресу фактически находятся в качестве исходных файлов на сайте GitHub по адресу https://github.com/MicrosoftEdge/Demos/tree/main/demo-to-do, а не на диске. Теперь вы можете изменять значения CSS в инструменте Elements, так как в Обозреватель Visual Studio Code открыта папка, содержащая исходные файлы, которые DevTools может сопоставить с скачанными файлами ресурсов, составляющими веб-страницу: На приведенном выше рисунке показано использование вкладки Стили с установленным флажком css зеркало редактирования, используемым для увеличения основного текста до 24 пт. Вкладка Edge DevTools: Browser отображает страницу при изменении значения. Адресная строка вкладки содержит URL-адрес, а не путь к файлу. Так как css зеркало флажок редактирования установлен, а соответствующий .css файл находится в локальной папке, доступной для записи, .css файл на локальном диске автоматически изменяется в . 24pt;

Предотвращение сообщений об ошибках при зеркальных отображениях или сопоставлении

Затем попробуйте изменить CSS, не открыв соответствующую папку:

1. Выберите Файл>Закрыть папку.
2. Запустите Средства разработки, нажав кнопку Запустить экземпляр , как описано выше.
3. На вкладке Edge DevTools: Браузер в адресной строке вставьте удаленный github.io URL-адрес, например https://microsoftedge.github.io/Demos/demo-to-do/. Теперь, когда папка с исходными файлами закрыта, при попытке изменить значения CSS в инструменте Элементы вы получите сообщение об ошибке DevTools. Вы можете просматривать веб-страницы, но не изменять их. Вы можете взаимодействовать со страницей и просматривать ее на разных устройствах и в состояниях отрисовки с помощью панели инструментов эмуляции устройства в нижней части вкладки Edge DevTools: Browser . Вы также можете проверить CSS и HTML. Но при попытке изменить страницу вы получите сообщение об ошибке, например Ошибка при зеркальном отображении: В качестве еще одной точки в этом сценарии можно ознакомиться с боковой панелью инструментов Microsoft Edge при нажатии кнопки Запуск экземпляра при просмотре URL-адреса и не открытой папки, содержащей исходные файлы, которые соответствуют ресурсам веб-страницы URL-адреса:

В этом случае доступны следующие варианты:

• Снимите флажок css зеркало редактирование на вкладке Стили и продолжайте экспериментировать с изменениями CSS (без автоматического редактирования CSS в исходных файлах). Это предотвращает дальнейшие сообщения об ошибках при сопоставлении с исходными файлами для редактирования CSS зеркало.
• Откройте папку, содержащую исходные файлы, соответствующие веб-странице, чтобы иметь автоматическое редактирование CSS в исходных файлах.
• Предоставьте папке доверие, открыв ее в Visual Studio Code, на случай, если DevTools пытается изменить исходный файл, но Visual Studio Code не предоставила доверие содержащейся папке.

URL-адреса, пути к файлам и открытие соответствующей папки

В некоторых случаях поведение средств разработки отличается для путей к файлам, чем для URL-адресов.

• Если ввести путь к файлу в адресной строке браузера DevTools и изменить CSS в DevTools, браузер узнает, где найти исходные файлы. Возможно, вам потребуется открыть эту папку, чтобы предоставить ей доверие, чтобы иметь возможность использовать CSS зеркало редактирования. Или снимите флажок css зеркало редактирования.
• Если ввести URL-адрес в адресной строке браузера DevTools, браузер знает, где найти скачаемые копии исходных файлов, если вы просматриваете только веб-страницы и экспериментируете с CSS. Если вы хотите использовать CSS зеркало редактирования (чтобы средства Разработки редактировали CSS в исходных файлах), необходимо установить флажок редактирования css зеркало и открыть папку в Visual Studio Code, содержащую исходные файлы, соответствующие веб-странице.

Закрытие средств разработки

Закройте экземпляры Средств разработки, используя любой из следующих подходов:

• Если Visual Studio Code находится в режиме отладки, нажмите кнопку Остановить на панели инструментов Отладка или выберите Запустить>остановить отладку: Вкладки Edge DevTools и Edge DevTools: Браузер закрываются.
• Если вкладка Edge DevTools открыта, нажмите кнопку Закрыть (x) на вкладке.
• Если открыта вкладка Edge DevTools: Браузер , нажмите кнопку Закрыть (x) на вкладке.
• Выберите Панель > действий Средства Microsoft Edge. Если в разделе Целевые объекты перечислены какие-либо целевые объекты, наведите указатель мыши на правую часть целевого экземпляра и нажмите кнопку Закрыть экземпляр (x): Затем отобразится кнопка Запустить экземпляр или Запустить проект .
• Выберите Файл>Закрыть папку.
• Закройте окно Visual Studio Code.
• Если расширение DevTools открыло внешний браузер, управляемый автоматизацией, закройте окно внешнего браузера.

См. также

• Начало работы с расширением DevTools для Visual Studio Code
• Расширение Средств разработки Microsoft Edge для Visual Studio Code

Webpack: руководство для начинающих

Представляю вашему вниманию перевод статьи «Webpack: A gentle introduction» автора Tyler McGinnis.

Перед изучением новой технологии задайте себе два вопроса:

1. Зачем нужен этот инструмент?
2. Какие задачи он выполняет?

Зачем нужен вебпак?

Вебпак — это сборщик модулей. Он анализирует модули приложения, создает граф зависимостей, затем собирает модули в правильном порядке в один или более бандл (bundle), на который может ссылаться файл «index.html».

App.js -> | Dashboard.js -> | Bundler | -> bundle.js About.js -> | 

Какие проблемы решает вебпак?

Обычно, при создании приложения на JavaScript, код разделяется на несколько частей (модулей). Затем в файле «index.html» необходимо указать ссылку на каждый скрипт.

Это не только утомительно, но и подвержено ошибкам. Важно не только не забыть про какой-нибудь скрипт, но и расположить их в правильном порядке. Если загрузить скрипт, зависящий от React, до загрузки самого React, приложение сломается. Вебпак решает эти задачи. Не нужно беспокоиться о последовательном включении всех скриптов.

Как мы скоро узнаем, сбор модулей является лишь одним из аспектов работы вебпака. При необходимости можно заставить вебпак осуществить некоторые преобразования модулей перед их добавлением в бандл. Например, преобразование SASS/LESS в обычный CSS, или современного JavaScript в ES5 для старых браузеров.

Установка вебпака

После инициализации проекта с помощью npm, для работы вебпака нужно установить два пакета — webpack и webpack-cli .

npm i webpack webpack-cli -D 

webpack.config.js

После установки указанных пакетов, вебпак нужно настроить. Для этого создается файл webpack.config.js , который экспортирует объект. Этот объект содержит настройки вебпака.

module.exports = <> 

Основной задачей вебпака является анализ модулей, их опциональное преобразование и интеллектуальное объединение в один или более бандл, поэтому вебпаку нужно знать три вещи:

1. Точка входа приложения
2. Преобразования, которые необходимо выполнить
3. Место, в которое следует поместить сформированный бандл

Точка входа

Сколько бы модулей не содержало приложение, всегда имеется единственная точка входа. Этот модуль включает в себя остальные. Обычно, таким файлом является index.js. Это может выглядеть так:

index.js imports about.js imports dashboard.js imports graph.js imports auth.js imports api.js 

Если мы сообщим вебпаку путь до этого файла, он использует его для создания графа зависимостей приложения. Для этого необходимо добавить свойство entry в настройки вебпака со значением пути к главному файлу:

module.exports = < entry: './app/index.js' >

Преобразования с помощью лоадеров (loaders)

После добавления точки входа, нужно сообщить вебпаку о преобразованиях, которые необходимо выполнить перед генерацией бандла. Для этого используются лоадеры.

По умолчанию при создании графика зависимостей на основе операторов import / require() вебпак способен обрабатывать только JavaScript и JSON-файлы.

import auth from './api/auth' // import config from './utils/config.json' // import './styles.css' // ️ import logo from './assets/logo.svg' // ️ 

Едва ли в своем приложении вы решитесь ограничиться JS и JSON-файлами, скорее всего, вам также потребуются стили, SVG, изображения и т.д. Вот где нужны лоадеры. Основной задачей лоадеров, как следует из их названия, является предоставление вебпаку возможности работать не только с JS и JSON-файлами.

Первым делом нужно установить лоадер. Поскольку мы хотим загружать SVG, с помощью npm устанавливаем svg-loader.

npm i svg-inline-loader -D 

Далее добавляем его в настройки вебпака. Все лоадеры включаются в массив объектов module.rules :

module.exports = < entry: './app/index.js', module: < rules: [] >> 

Информация о лоадере состоит из двух частей. Первая — тип обрабатываемых файлов ( .svg в нашем случае). Вторая — лоадер, используемый для обработки данного типа файлов ( svg-inline-loader в нашем случае).

module.exports = < entry: './app/index.js', module: < rules: [ < test: /\.svg$/, use: 'svg-inline-loader' >] > > 

Теперь мы можем импортировать SVG-файлы. Но что насчет наших CSS-файлов? Для стилей используется css-loader .

npm i css-loader -D 

module.exports = < entry: './app/index.js', module: < rules: [ < test: /\.svg$/, use: 'svg-inline-loader' >, < test: /\.css$/, use: 'css-loader' >] > > 

Теперь мы можем импортировать как SVG, так и CSS-файлы. Однако для того, чтобы наши стили работали корректно, нужно добавить еще один лоадер. Благодаря css-loader мы можем импортировать CSS-файлы. Но это не означает, что они будут включены в DOM. Мы хотим не только импортировать такие файлы, но и поместить их в тег , чтобы они применялись к элементам DOM. Для этого нужен style-loader .

npm i style-loader -D 

module.exports = < entry: './app/index.js', module: < rules: [ < test: /\.svg$/, use: 'svg-inline-loader' >, < test: /\.css$/, use: [ 'style-loader', 'css-loader' ] >] > > 

Обратите внимание, что поскольку для обработки CSS-файлов используется два лоадера, значением свойства use является массив. Также обратите внимание на порядок следования лоадеров, сначала style-loader , затем css-loader . Это важно. Вебпак будет применять их в обратном порядке. Сначала он использует css-loader для импорта ‘./styles.css’ , затем style-loader для внедрения стилей в DOM.

Лоадеры могут использоваться не только для импорта файлов, но и для их преобразования. Самым популярным является преобразование JavaScript следующего поколения в современный JavaScript с помощью Babel. Для этого используется babel-loader .

npm i babel-loader -D 

module.exports = < entry: './app/index.js', module: < rules: [ < test: /\.svg$/, use: 'svg-inline-loader' >, < test: /\.css$/, use: [ 'style-loader', 'css-loader' ] >, < test: /\.(js)$/, use: 'babel-loader' >] > > 

Существуют лоадеры почти для любого типа файлов.

Точка выхода

Теперь вебпак знает о точке входа и лоадерах. Следующим шагом является указание директории для бандла. Для этого нужно добавить свойство output в настройки вебпака.

const path = require('path') module.exports = < entry: './app/index.js', module: < rules: [ < test: /\.svg$/, use: 'svg-inline-loader' >, < test: /\.css$/, use: [ 'style-loader', 'css-loader' ] >, < test: /\.(js)$/, use: 'babel-loader' >] >, output: < path: path.resolve(__dirname, 'dist'), filename: 'index_bundle.js' >> 

Весь процесс выглядит примерно так:

1. Вебпак получает точку входа, находящуюся в ./app/index.js
2. Он анализирует операторы import / require и создает граф зависимостей
3. Вебпак начинает собирать бандл, преобразовывая код с помощью соответствующих лоадеров
4. Он собирает бандл и помещает его в dist/index_bundle.js

Плагины (plugins)

Мы рассмотрели, как использовать лоадеры для обработки отдельных файлов перед или в процессе генерации бандла. В отличие от лоадеров, плагины позволяют выполнять задачи после сборки бандла. Эти задачи могут касаться как самого бандла, так и другого кода. Вы можете думать о плагинах как о более мощных, менее ограниченных лоадерах.

Давайте рассмотрим пример.

HtmlWebpackPlugin

Основной задачей вебпака является генерация бандла, на который можно сослаться в index.html .

HtmlWebpackPlugin создает index.html в директории с бандлом и автоматически добавляет в него ссылку на бандл.

Мы назвали бандл index_bundle.js и поместили его в dist . HtmlWebpackPlugin создаст новый файл index.html в директории dist и добавит в него ссылку на бандл — . Здорово, правда? Поскольку index.html генерируется HtmlWebpackPlugin , даже если мы изменим точку выхода или название бандла, HtmlWebpackPlugin получит эту информацию и изменить содержимое index.html .

Как нам использовать этот плагин? Как обычно, сначала его нужно установить.

npm i html-webpack-plugin -D 

Далее добавляем в настройки вебпака свойство plugins .

const path = require('path') module.exports = < entry: './app/index.js', module: < rules: [ < test: /\.svg$/, use: 'svg-inline-loader' >, < test: /\.css$/, use: [ 'style-loader', 'css-loader' ] >, < test: /\.(js)$/, use: 'babel-loader' >] >, output: < path: path.resolve(__dirname, 'dist'), filename: 'index_bundle.js' >, plugins: [] > 

Создаем экземпляр HtmlWebpackPlugin в массиве plugins .

 const path = require('path') const HtmlWebpackPlugin = require('html-webpack-plugin') module.exports = < entry: './app/index.js', module: < rules: [ < test: /\.svg$/, use: 'svg-inline-loader' >, < test: /\.css$/, use: [ 'style-loader', 'css-loader' ] >, < test: /\.(js)$/, use: 'babel-loader' >] >, output: < path: path.resolve(__dirname, 'dist'), filename: 'index_bundle.js' >, plugins: [ new HtmlWebpackPlugin() ] > 

EnvironmentPlugin

Если вы используете React, то захотите установить process.env.NODE_ENV в значение production перед разворачиванием (деплоем) приложения. Это позволит React осуществить сборку в режиме продакшна, удалив инструменты разработки, такие как предупреждения. Вебпак позволяет это сделать посредством плагина EnvironmentPlugin . Он является частью вебпака, так что его не нужно устанавливать.

const path = require('path') const HtmlWebpackPlugin = require('html-webpack-plugin') const webpack = require('webpack') module.exports = < entry: './app/index.js', module: < rules: [ < test: /\.svg$/, use: 'svg-inline-loader' >, < test: /\.css$/, use: [ 'style-loader', 'css-loader' ] >, < test: /\.(js)$/, use: 'babel-loader' >] >, output: < path: path.resolve(__dirname, 'dist'), filename: 'index_bundle.js' >, plugins: [ new HtmlWebpackPlugin(), new webpack.EnvironmentPlugin(< 'NODE_ENV': 'production' >) ] > 

Теперь в любом месте нашего приложения мы можем установить режим продакшна с помощью process.env.NODE_ENV .

HtmlWebpackPlugin и EnvironmentPlugin — это лишь небольшая часть системы плагинов вебпака.

Режим (mode)

В процессе подготовки приложения к продакшну, необходимо выполнить несколько действий. Мы только что рассмотрели одно из них — установку process.env.NODE_ENV в значение production . Другое действие заключается в минификации кода и удалении комментариев для уменьшения размера бандла.

Существуют специальные плагины для решения указанных задачи, но есть более легкий способ. В настройках вебпака можно установить mode в значение development или production в зависимости от среды разработки.

const path = require('path') const HtmlWebpackPlugin = require('html-webpack-plugin') module.exports = < entry: './app/index.js', module: < rules: [ < test: /\.svg$/, use: 'svg-inline-loader' >, < test: /\.css$/, use: [ 'style-loader', 'css-loader' ] >, < test: /\.(js)$/, use: 'babel-loader' >] >, output: < path: path.resolve(__dirname, 'dist'), filename: 'index_bundle.js' >, plugins: [ new HtmlWebpackPlugin() ], mode: 'production' > 

Обратите внимание, что мы удалили EnvironmentPlugin . Дело в том, что после установки mode в значение production вебпак автоматически присваивает process.env.NODE_ENV значение production . Это также минифицирует код и удаляет предупреждения.

Запуск вебпака

На данный момент мы знаем, как работает вебпак и как его настраивать, осталось его запустить.

У нас есть файл package.json , в котором мы можем создать script для запуска webpack .

"scripts":

Теперь при выполнении команды npm run build в терминале будет запущен вебпак, который создаст оптимизированный бандл index_bundle.js и поместит его в dist .

Режимы разработки и продакшна

В целом, мы закончили с вебпаком. Напоследок давайте рассмотрим, как переключаться между режимами.

При сборке для продакшна, мы хотим все оптимизировать, насколько это возможно. В случае с режимом разработки верно обратное.

Для переключения между режимами необходимо создать два скрипта в package.json .

npm run build будет собирать продакшн-бандл.

npm run start будет запускать сервер для разработки и следить за изменениями файлов.

Если помните, мы установили mode в значение production в настроках вебпака. Однако теперь нам это не нужно. Мы хотим, чтобы переменная среды имела соответствующее значение в зависимости от выполняемой команды. Немного изменим скрипт build в package.json .

"scripts":

Если у вас Windows, то команда будет такой: «SET NODE_ENV=’production’ && webpack» .

Теперь в настроках вебпака мы можем менять значение mode в зависимости от process.env.NODE_ENV .

. mode: process.env.NODE_ENV === 'production' ? 'production' : 'development' > 

Для сборки готового бандла для нашего приложения мы просто запускаем npm run build в терминале. В директории dist создаются файлы index.html и index_bunlde.js .

Сервер для разработки

Когда речь идет о разработке приложения принципиально важное значение имеет скорость. Мы не хотим презапускать вебпак и ждать новую сборку при каждом изменении. Вот где нам пригодится пакет webpack-dev-server .

Как следует из названия, это вебпак-сервер для разработки. Вместо создания дирекории dist , он хранит данные в памяти и обрабатывает их на локальном сервере. Более того, он поддерживает живую перезагрузку. Это означает, что при любом изменении webpack-dev-server пересоберет файлы и перезапустит браузер.

npm i webpack-dev-server -D 

Все, что осталось сделать, это добавить скрипт start в package.json .

"scripts":

Теперь у нас имеется две команды: одна для запуска сервера для разработки, другая для сборки готового бандла.

Надеюсь, статья была вам полезной. Благодарю за внимание.

Инструкция по SCSS

HTML, CSS

На чтение 11 мин Просмотров 24.6к. Опубликовано 03.03.2021

SCSS — это препроцессор для написания CSS кода. SCSS дает дополнительные возможности. С ним можно использовать переменные, вложенные селекторы и медиазапросы, собирать несколько файлов в один, миксины, наследования и другие полезные вещи которые упростят и структурируют работу с CSS кодом. В этой статье мы будем говорить о SCSS. О его различии с Sass будет сказано немного ниже.

Что такое SCSS

SCSS это отдельный формат файла, в котором пишутся стили для сайта. Он очень похож на CSS, но в добавок имеет множество улучшений. Буквально SCSS расшифровывается как Super CSS — то есть CSS c супер-силой.

SCSS пишется в отдельных файлах с расширением .scss , например main.scss .

SCSS не подключается в браузер напрямую. Браузеры не умеют с ним работать. SCSS компилируется (собирается) в привычный для браузера CSS код, и уже CSS файл подключается на страницу.

Для того чтобы скомпилировать SCSS в CSS нужно использовать компилятор. Это может быть специальная программа: Koala, Prepros, или другая. Либо плагин для редактора. Или инструмент для сборки проекта: Gulp, Webpack или другой.

На начальном этапе я рекомендую собирать SCSS именно специальными программами, в частности Koala, я вижу это как лучшее решение для старта. Такие программы просты в установке и использовании. Плагины в редакторах — всегда требуют дополнительной настройки от проекта к проекту, могу конфликтовать с другими плагинами. Сборщики вроде Gulp и других — хорошее решение, но подходят для профессионалов, так как требуют дополнительной настройки и ряда дополнительных технологий (npm , node js).

Особенности SCSS

• Это отдельный формат файла
• Пишется в отдельных файлах с расширением .scss
• SCSS не подключается в браузер напрямую
• SCSS надо компилировать в CSS
• Дает возможность использовать переменные, вложенные селекторы и медиазапросы, собирать несколько файлов в один, миксины, наследования и многое другое чтобы структурировать работу с CSS кодом

Отличие Sass от SCSS

Sass и SCSS очень похожи, но в них есть пару различий. Sass не использует точки с запятой и не имеет фигурных скобок. Вложенность в Sass определяется отступами.

Пример SCSS кода:

body

Пример Sass кода:

body font-family: sans-serif font-size: 18px

Далее мы продолжим разбирать SCSS синтаксис.

Настройка Windows для программы Koala

Дело в том что программа Koala которую мы будем использовать для компилирования SCSS не работает с русскими символами, если они будут встречаться в пути к имени вашего проекта. Например такой путь к проекту C:/Users/Юрий/Рабочий стол/html-project не будет работать, так как в пути есть кириллица. Чтобы такого не было стоит включить поддержку UTF в Windows. Делается это следующим образом.

В Windows 10:

1. Параметры
2. Время и язык
3. слева вкладка «Язык»
4. справа Административные языковые параметры
5. Вкладка «Дополнительно»
6. Изменить язык системы
7. Нажимаем на галочку: «Бета-версия. Использовать UTF-8.»
8. Нажимаем ОК, и перезагружаемся, после этого заново открываем Коалу и попробуем скомпилировать

Внимание! Данная настройка может повлечь проблемы в других программах.

Например при ее включении не запускается Open Server. Так что включать ее или нет, решать вам. Мой совет — не включать. Просто следить чтобы все пути в проектах были на латинице.

Компиляция SCSS

Чтобы скомпилировать SCSS воспользуемся программой Koala. Скачать ее можно здесь. Она доступна для всех платформ, и умеет компилировать не только SASS/SCSS, но и Less c CofeeScript.

После создаем проект в котором создаем SCSS файл и пишем в нем SCSS код. Например вот такой:

Заметьте, я создал именно папку sass , чтобы Koala для готового .css файла создала отдельную css папку в корне проекта. Она умеет такое делать автоматически, но только когда исходная папка имеет имя sass , даже если внутри .scss файлы.

Содержимое файла main.scss

$mainColor: red; body

Определена переменная с именем $mainColor со значением red .
В body эта переменная использована, чтобы определить цвет текста.

Далее закидываем проект в Koala, видим что она нашла нужный файл и нотификацию о успехе компиляции.

Посмотрим на содержимое проекта, еще раз. Теперь в нем появилась папка CSS c скомпилированным main.css файлом.

Код main.css файла:

body < font-size: 18px; color: red; >/*# sourceMappingURL=main.css.map */

Поздравляю! Мы только что скомпилировали SCSS!)

Настройки программы Koala

Настройки у программы достаточно просты. Достаточно кликнуть на иконку шестеренки.

Основные настройки

Здесь вы можете выбрать язык программы, есть и Русский. Опции сворачивания программы в трей, чтобы не занимала место на таскбаре, нотификации при успешной компиляции, автоматическую компиляцию файлов когда проект добавлен в программу или обновлен. Можете поставить как у меня, но будьте аккуратны с треем, при сворачивании иконка программы будет улетать в него, и может показаться что программа не запущена, но она просто спряталась.

Теперь зайдем в настройки для SASS

Compass mode нужен чтобы использовать возможности библиотеки Compass, на начальном этапе они вам точно не понадобятся, поэтому отключаем.

Включаем Source Map (исходные карты), они нужны чтобы видеть в каком .scss файле изначально был описан каждый класс, который будет скомпилирован в CSS. Удобно для отладки стилей.

Еще можно включить Autoprefix и указать значение например как у меня, > 1% . Это значит что мы будем поддерживать 99% всех браузеров. Более подробно ознакомиться с ним можно на его официальной странице в GitHub, но указанной настройки вам также хватит для старта. Поэтому не рекомендую с ним заморачиваться на этом этапе.

Стиль вывода имеет 4 разных значения:

Если вы хотите выбрать максимально читабельный и развернутый CSS на выходе, то это expanded. Nested это немного сжатый с указанием вложенности стиль оформления CSS, compact — вытянутые стили в оду строку, каждый селектор с новой строки. Compressed- сжатый, минифицированный вид CSS, когда весь код файла вытянут в одну строчку, и удалены все лишние пробелы и символы которые могут быть удалены без потери работоспособности.

Я использую либо включенный стиль expanded c включенными «сорс-мапами» для удобства разработки, либо compressed c отключенным source maps когда надо сделать максимально сжатый CSS файл без лишнего веса.

Индивидуальные настройки для файлов

Еще в Koala можно открывать индивидуальные настройки для каждого файла, просто кликнув по нему. Выглядит это вот так:

По умолчанию эти индивидуальные настройки дублируют основные, поэтому не рекомендую их изменять. Единственное чем они могут быть полезны — это отключение галочки автокомпиляции для тех файлов которые вы не хотите компилировать. И еще в этой панели есть кнопка Compile, пригодится если вы хотите запустить сборку принудительно.

На этом с настройками закончили. Компиляция SCSS настроена.

Возможности SCSS

SCSS имеет массу возможностей, в некотором роде это почти язык программирования �� потому что в нем можно писать циклы и условия. Но реально для базовой пользы при верстке достаточно лишь несколько его функций. О них я расскажу в первую очередь.

Основные полезные возможности SCSS на каждый день:

• Подключение фрагментов, импорт других файлов
• Переменные
• Вложенные селекторы и медиа запросы

Подключение фрагментов, импорт файлов

В SCSS можно разделать стили проекта на отдельные части. Вот типичная структура проекта:

В папке sass созданы отдельные файлы для стилей проекта:
base/_vars.scss — глобальные переменные (сокращение от variables),
base/_base.scss — сбросы, нормализаторы и базовые стили проекта

В папке blocks отдельные файлы под секции или блоки и компоненты проекта: header, main, footer.

Имена данных файлов начинаются с символа подчеркивания, сделано это для того чтобы компилятор не компилировал их по умолчанию. Так он пойме что эти файлы являются фрагментами, не самостоятельными файлами, а частью другого файла. Это соглашение именования в документации SASS.

Импорт всех этих файлов выглядит следующим образом:

// Base @import "./base/vars"; @import "./base/base"; // Header @import "./blocks/header"; @import "./blocks/main"; @import "./blocks/footer";

В импорте опущены символы подчеркивания в начале имени файла, и опущено расширения. SASS по умолчанию подставит _ и проверит файлы с расширением .scss . Поэтому их можно не указывать.

Импорты scss файлов в scss полностью переносят содержимое импортируемых. То есть на выходе мы получим один файл со всем кодом который импортировался в него.

Если внутри scss использовать импорт .css файлов, то содержимое css файлов не будет импортировано при компиляции, директива импорта так и останется импортом.

Пример импорта SCSS и CSS файла:

@import "./example.css"; @import "./base.scss";

Результат в CSS:

@import url(./example.css); body

Комментарии в SCSS

В SCSS можно указывать комментарии двух стилей. Комментарии в CSS стиле /* Текст комментария */ — многострочные и будут перенесены в итоговый CSS код. Комментарии начинающиеся с // — однострочные, и не будут скомпилированы в CSS, они останутся только в .scss файле

/* Комментарий который попадет в CSS */ // Комментарий который останется только в SCSS

Переменные в SCSS

В SCSS можно использовать переменные. Объявляются они через имя начинающееся с символа $ , и после используются просто указав имя переменной, там где нужно получить её значение. Пример кода с переменной:

$mainColor: red; body

Если говорить о переменных в рамках проекта, то для них создается отдельный файл _vars.scss который подключается в начале импортов. Пример с ним был указан выше.

Стоит заметить что переменные в scss имеют области видимости, и если в локальной области видимости переопределить переменную, то будет работать локальная переменная, а не глобальная.

Пример. Этот SCSS код:

// Переменная $mainColor в глобальной области видимости имеет значение red $mainColor: red; body < // Переопределяем локально, // внутри селектора body переменую $mainColor на значение green $mainColor: green; color: $mainColor; >

Даст следующий результат:

body < color: green; /* В результате видим значение green */ >

Вложенные селекторы и медиа запросы

SCSS позволяет писать вложенные селекторы. Это можно проделывать с классами, псевдоэлементами, БЭМ элементами, медиазапросами. Давайте посмотрим на пример с вложенностью:

.header < font-size: 18px; // Вложенность по БЭМ, даст нам .header__title &__title < font-size: 32px; >// Вложенный селектор, на выходе будет .header .nav .nav < font-size: 22px; >// Вложенный медиазапрос, на выходе будет медиазапросом для класса .header @media (max-width: 1199px) < font-size: 16px; >>

В CSS получим следующий результат:

.header < font-size: 18px; >.header__title < font-size: 32px; >.header .nav < font-size: 22px; >@media (max-width: 1199px) < .header < font-size: 16px; >>

Вложенность для псевдо элементов before и after :

.title < font-size: 22px; &::before < content: "—"; >&::after < content: "—"; >>

Результат в CSS:

.title < font-size: 22px; >.title::before < content: "—"; >.title::after

Указание родительского селектора при вложенности и символ &

Под символом & подразумевается селектор внутри которого мы работаем. Его можно использовать не только для BEM naming подстановок, но и для цепочек от родительского селектора, например:

.card < font-size: 18px; .main & < font-size: 16px; >>

.card < font-size: 18px; >.main .card

Другие базовые возможности SCSS:

• Миксины
• Наследования
• Математические операции

Другие базовые возможности можно посмотреть в документации по SCSS.

Примечание. Возможные проблемы и их решения

Если вы сталкиваетесь с тем что Koala отказывается компилировать или следить за изменениями в файлах, проверьте чтобы в пути к вашему проекту не было кириллических символов. Путь к проекту начиная от диска должен быть полностью на латинице, вклбчая и имя пользователя если проект находится на рабочем столе.

Такой вариант не подойдет: C:\Users\Юрий\Desktop\forest-travel
Такой путь будет работать: C:\Users\yurij\Desktop\forest-travel

Если имя пользователя в Windows у вас на кириллице, тогда чтобы не переименовывать его, не создавать нового или не переустанавливать систему, просто размещайте все проекты на каком-либо диске, избегая рабочий стол, например: C:\projects\forest-travel

Ссылки

• Официальная документация SASS
• Документация SASS на русском языке
• Программа Koala