Из css в css: Как импортировать css в css

Наши новые модные коробки

Когда вы сохраните файл CSS и обновите нашу HTML-страницу в веб-браузере, вы должны увидеть что-то очень похожее на это:

Yay For Style

Возможно, это некрасиво, но мы создали нашу первую HTML-страницу с помощью CSS! Давайте подытожим ваши знания CSS. Вы знаете:

• Базовый синтаксис CSS (рассмотренный в нашем предыдущем уроке)
• Как связать файл CSS с HTML-страницей
• Как выбрать определенные элементы HTML и стилизовать их

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

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

Как настроить CSS и модули CSS в webpack

Первое, что вам нужно настроить в вашем проекте webpack, это CSS. CSS — это , поэтому является фундаментальным для веб-приложения — он нужен почти всем веб-приложениям. Но настроить webpack сложно. И если вы хотите модули CSS и CSS может еще больше запутать. В этой статье я разберу все это для вас.

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

• Как настроить базовый CSS в проекте webpack с помощью style-loader и css-loader
• Как извлечь CSS в собственный файл style.css
• Как настроить модули CSS с помощью веб-пакета
• Как настроить CSS и модули CSS

Приступим к настройке CSS. Я предполагаю, что у вас уже есть настроенный проект веб-пакета. Если вы этого не сделаете, зайдите на createapp.dev, чтобы создать свой собственный шаблон веб-пакета.

Создайте файл CSS и укажите ссылку на него

Прежде чем настраивать поддержку CSS в настройках веб-пакета, давайте сначала добавим файл CSS и используем его.

Первое, что мы собираемся сделать, это добавить в проект файл styles.css . Поместим его в папку src .

 корпус {
  белый цвет;
  цвет фона: черный;
} 

Этот файл CSS создает черный фон и белый цвет текста. Это дает понять, работает это или нет — если это работает, вся страница будет черной!

Следующее, что нужно сделать, это импортировать его. Мы сделаем это из файла JavaScript, потому что по умолчанию webpack помещает CSS внутри пакета, что означает, что мы должны ссылаться на него из другого файла JavaScript (мы рассмотрим, как извлечь CSS в отдельный файл позже в этом руководстве). .

Поместите это в свой файл index.js :

 import "./styles.css" 

Настройте webpack css-loader и style-loader

Чтобы иметь возможность использовать CSS в вашем приложении webpack, вам нужно установить новый загрузчик. По умолчанию webpack понимает только Javascript и JSON. С помощью загрузчика вы можете перевести файл другого типа в формат, который понимает и может работать webpack.

Существует много загрузчиков веб-пакетов, и каждый загрузчик имеет определенную цель. Вам нужны два загрузчика для поддержки CSS в вашем приложении: css-loader и style-loader . Давайте посмотрим, как мы можем настроить css-loader и style-loader в webpack.

Вы настроили загрузчик с ключевым словом module в вашем webpack.config.js .

Вот как вы настраиваете CSS в своем модуле

: {
    правила: [
      {
        тест: /\.css$/,
        использовать: [
          'загрузчик стилей',
          'css-загрузчик'
        ]
      }
    ]
  } 

Ключевое слово test указывает веб-пакету, для каких файлов следует использовать этот загрузчик. Ключевое слово use указывает веб-пакету, какие загрузчики следует запускать для этих файлов.

Как видно из конфига, нужно использовать два загрузчика, style-loader и css-loader . Вам также необходимо установить их как зависимости NPM:

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

Что делают css-loader и style-loader?

Загрузчики — это просто функции JavaScript: они принимают некоторые данные в качестве входных данных, делают что-то с этими данными и возвращают преобразованную версию данных. Когда вы используете два загрузчика в веб-пакете, он берет вывод первого и отправляет его в качестве ввода второму. В нашем примере он берет файл CSS и прогоняет его через

Давайте посмотрим, что делают загрузчики.

css-loader считывает CSS из файла CSS и возвращает CSS с import и url(...) решенными правильно. Что это значит? Давайте посмотрим на пример. Допустим, у вас есть URL в CSS, ссылающийся на другой ресурс, например изображение:

 . topbanner {
  background: url("topbanner.svg") #00d исправлено отсутствие повторов;
} 

В этом примере мы ссылаемся на topbanner.svg из CSS. Когда css-loader видит эту строку, он говорит веб-пакету загрузить этот файл с помощью соответствующего загрузчика. Чтобы это работало, вам также необходимо настроить загрузчик SVG, потому что файл является файлом SVG:

 module: {
  правила: [
    // Загрузчик CSS здесь
    {
      тест: /\.svg$/,
      использовать: "файл-загрузчик",
    },
  ]
} 

Для загрузки файлов SVG мы используем загрузчик файлов webpack.

Если бы вы не настроили css-loader вы получите загадочную ошибку, подобную этой:

 ОШИБКА в ./src/styles.css 1:0
Ошибка синтаксического анализа модуля: неожиданный токен (1:0)
Вам может понадобиться соответствующий загрузчик для обработки этого типа файла, в настоящее время загрузчики не настроены для обработки этого файла. См. https://webpack. js.org/concepts#loaders.
> .topbanner {
| background: url("zip.svg") #00D - исправлено отсутствие повторов;
| }
 @ ./src/styles.css 1:14-39
 @ ./src/index.js 

Вы получите эту ошибку , хотя вы настроили загрузчик для файлов SVG. Избегайте таких странных ошибок, всегда используя css-loader для своей конфигурации CSS.

Следующим загрузчиком, который вы настроили, был загрузчик стилей . Этот загрузчик добавляет CSS в DOM, чтобы стили были активны и видны на странице. Это необходимо, потому что CSS помещается в файл bundle.js — отдельного файла styles.css нет.

Можно выводить отдельно styles.css с помощью плагина mini-css-extract-plugin вместо style-loader , как мы делали ранее.

Первое, что вам нужно сделать, это установить зависимость

 npm install --save-dev mini-css-extract-plugin 

Затем вам нужно импортировать плагин в верхней части webpack. config.js

 const MiniCssExtractPlugin = require("mini-css-extract-plugin") 

Далее нужно включить плагин в разделе плагинов вашего webpack.config.js файл:

 плагины: [
  новый MiniCssExtractPlugin(),
], 

И последнее, но не менее важное: вы заменяете style-loader на MiniCssExtractPlugin.loader :

 {
  тест: /\.css$/,
  использовать: [
    MiniCssExtractPlugin.loader, // вместо style-loader
    'css-загрузчик'
  ]
} 

Теперь, когда вы запускаете webpack, он выводит файл main.css в папку dist, на которую вы можете ссылаться из вашего index.html файл. (удалите строку import "./styles.css"; строку из index.js , если вы добавили это)

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

Но сначала что такое модули CSS? Из репозитория github:

«Модуль CSS — это файл CSS, в котором все имена классов и имена анимаций по умолчанию ограничены локально».

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

На сайте CSS-tricks.com есть хорошее введение в модули CSS, которое будет полезно, если вы хотите узнать больше. В этом посте мы сосредоточимся на том, как его настроить.

Настройка модулей CSS очень похожа на настройку CSS.

 {
  тест: /\.css$/,
  использовать: [
    'загрузчик стилей',
    {
      загрузчик: 'css-загрузчик',
      параметры: {
        импортЗагрузчики: 1,
        модули: правда
      }
    }
  ]
} 

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

Это модули : true указывает css-loader включить модули CSS.

importLoaders: 1 означает, что он также применяет модули CSS к ресурсам @import ed.

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

Таким образом, чтобы включить модули CSS, нужно передать некоторые параметры в css-загрузчик . Но что, если мы хотим использовать как CSS-модули , так и CSS. Допустим, у вас есть файл layout.css , который является действительно глобальным CSS. Или вы используете сторонний компонент, зависящий от глобального CSS. Это возможно сделать!

Нам нужно соглашение, чтобы решить, какие файлы являются глобальными CSS, а какие — модулями CSS. Мне нравится использовать модули CSS только для файлов, оканчивающихся на *.module.css , например modal.module.css и все остальные файлы *.css являются глобальными.

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