Как подцепить стили css совместно с css modules?

Webpack - это инструмент, который позволяет объединять и управлять различными модулями и ресурсами веб-приложения. Он является одним из самых популярных инструментов для сборки и упаковки файлов JavaScript, CSS и других ресурсов.

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

Чтобы подключить стили CSS совместно с CSS модулями в проекте, необходимо выполнить несколько шагов.

1. Установка необходимых пакетов:
Для использования CSS модулей с Webpack необходимо установить следующие пакеты:

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

2. Конфигурация Webpack:
Добавьте соответствующие загрузчики (loaders) в конфигурацию Webpack. Для этого измените свой файл webpack.config.js следующим образом:

   module.exports = {
     // ...
     module: {
       rules: [
         {
           test: /.css$/,
           use: [
             // Загрузчики выполняются справа налево
             'style-loader',
             {
               loader: 'css-loader',
               options: {
                 // Включить CSS модули
                 modules: {
                   localIdentName: '[name]__[local]___[hash:base64:5]',
                 },
               },
             },
           ],
         },
       ],
     },
     // ...
   };

Здесь мы настраиваем загрузчики для файлов с расширением .css. Сначала используется css-loader, который обрабатывает и импортирует CSS файлы, а затем style-loader, который инлайнит стили внутрь HTML документа.

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

3. Импорт и использование CSS модулей:
Теперь вы можете импортировать и использовать CSS модули в своем JavaScript коде. Webpack автоматически назначает уникальные классы вашему стилю, и вы можете использовать их в своем коде.

   import styles from './styles.module.css';
   
   // Использование классов стилей
   element.classList.add(styles.className);

Здесь мы импортируем CSS модуль из файла styles.module.css. При импорте styles будет содержать имена классов, определенные в файле CSS модуля.

Теперь вы можете использовать CSS модули в своем проекте. Ваши стили будут локализованы и не будут конфликтовать с другими стилями в проекте.