Полный цикл в digital

Лоадеры для CSS Webpack

Для начала нам нужно установить лоадеры, которые будут загружать CSS из файла и добавлять его в JavaScript бандл.

Лоадер css-loader нужен, чтобы Webpack мог обработать импорты CSS файлов. Давайте установим его:

npm install css-loader --save-dev

Лоадер style-loader нужен, чтобы Webpack мог внедрять CSS код в HTML страницу. Давайте установим его:

npm install style-loader --save-dev

Настройка импорта

После установки лоадеров мы можем воспользоваться ими в файле конфигурации, порядок их перечисления в массиве свойства use важен, так как загрузчики используются от последнего к первому:

webpack.config.jsexport default {
  entry: './src/index.js',
    module: {
      rules: [
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader'],
      },
      ],
    },
};

Тестирование импорта

Давайте потестируем импорт CSS стилей в JavaScript файле, сделаем файл со стилями:

/src/styles.cssbody {
  background: red;
}

Импортируем его:

/src/index.jsimport './styles.css';

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

Заполните форму уже сегодня!
Для начала сотрудничества необходимо заполнить заявку или заказать обратный звонок. В ответ получите коммерческое предложение, которое будет содержать индивидуальную стратегию с учетом требований и поставленных задач
Работаем по будням с 9:00 до 18:00. Заявки, отправленные в выходные, обрабатываем в первый рабочий день до 12:00.
Спасибо, ваш запрос принят и будет обработан!
Эйч Маркетинг