#2 Webpack 2 - настраиваем css

poster
В этом уроке мы продолжаем знакомиться с webpack 2. А именно с подключением css и работе с стилями.
Понравилось? Поделитесь с друзьями!
Понравилось?
Поделитесь с друзьями!
Комментарии
Текст видео

В этом уроке мы продолжаем знакомиться с webpack 2. А именно с подключением стилей и работе с ними.

Два самых базовый плагина для работы с css в webpack - это css-loader и style-loader. Давайте установим их

npm install css-loader style-loader --save-dev

Style-loader нужен нам для инджекта стилей в head, а css-loader, для того, чтобы мы могли импортировать css в js.

Теперь добавим в наш webpack.config.js новое правило для css файлов

{
  test: /\.css$/,
  use: [
    'style-loader',
    'css-loader'
  ]
}

Обратите внимание, что в webpack 2 можно задавать несколько лоадеров в виде массива, что очень удобно. В webpack 1 мы разделяли их восклицательным знаком.

Давайте добавим папку css и файл app.css внутри

.container {
  background: green;
}

И импортируем наш css в app.js

import './css/app.css'

Это позволяет нам строить такие же цепочки подключений css к проекту как и js.

По умолчанию, весь импортированный css попадает в глобальный скоуп в head. Давайте к p добавим класс container.

<p class="container"></p>

Также напоминаю, что webpack можно запускать в watch режиме с помощью команды webpack -w.

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

Но это не самое лучшее решение, так как все стили у нас попадают в глобальный скоуп. А у глобальных стилей много проблем. Например их можно случайно перекрыть из любого другого места. Чтобы этого избежать мы можем писать локальные классы. Давайте попробуем

:local(.container) {
  background: green;
}

Как мы видим, для описания мы используем специальный синтаксис :local.

Теперь давайте изменим наш импорт на

import css from './css/app.css'

И законсолим css. Как мы видим, это обьект, внутри которого есть уникальный ключ нашего класса, который сгенерировался специально для этого модуля. Давайте добавим новый елемент к странице используя этот класс

document.body.innerHTML += `<div class="${css.container}">Test block</div>`;

Если мы посмотрим в браузер, то у нас создался новый елемент с уникальный классом и к нему применились стили. Это значит, что если мы импортируем класс container в другом модуле, то он не перекроется. Это делает наш css более модульным.

Также мы можем делать композицию классов.

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

:local(.basicContainer) {
  background: green;
  color: green;
}

:local(.container) {
  composes: basicContainer;
  background: blue;
}

Мы используем специальный синтаксис composes, для подмешивания стилей в другой класс.

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

Теперь весь наш css добавляется в head. Но конечно, для продакшена это не вариант. Мы хотим собрать весь наш css в отдельный bundle файл, который мы будем подключать отдельно, а не вставлять в head.

Давайт установим пакет extract-text-webpack-plugin

npm install --save-dev extract-text-webpack-plugin

И изменим наши правила работы с css

const ExtractTextPlugin = require('extract-text-webpack-plugin')
{
  test: /\.css$/,
  use: ExtractTextPlugin.extract({
    fallback: 'style-loader',
    use: 'css-loader'
  })
}

И добавим новый плагин

plugins: [
  new ExtractTextPlugin('styles.css')
]

Если мы перезапустим webpack, то увидим, что все стили собираются в отдельный style.css в папке dist. Bundle стилей отдельно от javascript, больше подходит для продакшена в плане производительности, если стилей много, поэтому стоит использовать его.

И теперь мы можем подключить стили как обычный css файл

<link href="dist/styles.css" rel="stylesheet" />

Если у вас возникли какие-то вопросы или комментарии, пишите их прямо под этим видео.

Только зарегистрированные пользователи могут оставлять комментарии.  Войдите, пожалуйста.
Serafim
3 лет назад
не работает команда webpack -w, пишет - -bash: webpack: command not found
monsterlessons
3 лет назад
у вас точно установлен webpack? Как вариант можете установить вебпак глобально или запустить напрямую из node_modules node_modules/webpack/bin/webpack.js -w
Serafim
3 лет назад
спасибо
Максим Либер
3 лет назад
хотелось бы например, что бы вы взяли какой-то рабочий проект (ваш или вообще чей-то) на вебпаке и разобрали структуру конфига и тд.
monsterlessons
3 лет назад
Спасибо за идею. Думаю сделаю что-то похожее чуть позже.
Максим Либер
3 лет назад
Добрый день. Продолжение данной серии будет? Или на этом все?
monsterlessons
3 лет назад
Будет, но немного позже. Есть пожелания что снять о webpack 2?
Иван Сусанин
3 лет назад
Доброго Вам дня! Есть предложение - в тексте к видео можно оставлять ссылку на документацию для самостоятельного изучения. Для этого урока например можно было бы скинуть https://github.com/webpack-contrib/style-loader https://github.com/webpack-contrib/css-loader Для удобства еще можно добавить две кнопки возле заголовка над видео ( <-- и --> ) Да и название кнопки при сохранении после редактирования было бы интуитивно - "сохранить"
monsterlessons
3 лет назад
Спасибо за фидбек. Ссылки постараюсь оставлять. Кнопки назад и вперед я добавлю только в видео, которые есть в сериях, так как только там будут логичны, то к сожалению позже, так как пока занят новой серией по React/Redux Кнопку сохранить тоже добавлю (в задачи добавил)
Alex
3 лет назад
хорошо бы еще посмотреть базовую настройку для react webpack (или лучше просто пользоваться create-react-app для этого?)
monsterlessons
3 лет назад
create-react-app отличное решение для небольших, несложных приложений. Думаю чуть позже сниму урок по настройке webpack 2 для react.
Alex
3 лет назад
похоже что версию надо сохранить на 2.2.1, текущая 2.3 не понимает относительные пути - ругается на ./dist
Иван Сусанин
3 лет назад
если в webpack.config.js прописан publicPath, например module.exports = { ... output: { path: resolve(__dirname,'dist'), filename: 'bundle.js', publicPath: '/static/' // это он }, ... } То и styles.css будет появляться в папке dist а подключать его надо по тому же пути что и bundle.js <head> ... <link href="/static/styles.css" rel="stylesheet" /> </head> то есть через publicPath больше инфы https://webpack.js.org/guides/migrating/#extracttextwebpackplugin-breaking-change
Nur K
4 лет назад
Привет! У меня не компилит sass. package.json: "extract-text-webpack-plugin": "^2.1.0", webpack.config.js: module: { rules: [ { test: /\.scss$/, use: ExtractTextPlugin.extract({ fallback: 'style-loader', use: ['css-loader', 'sass-loader'] }) } ] }, plugins: [ new ExtractTextPlugin('main.css') ]
monsterlessons
4 лет назад
Посмотрите тут https://github.com/webpack-contrib/sass-loader. Там в разделе production есть пример как вам нужно.
Nur K
4 лет назад
Спасибо. Решил. Забыл импортировать sass файл в js файле