Как импортировать CSS В Webpack?

В Webpack существует несколько способов импортирования CSS. Рассмотрим наиболее распространенные:

1. С использованием css-loader и style-loader:
- Установите необходимые пакеты с помощью npm:

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

- В конфигурационном файле webpack (обычно webpack.config.js) добавьте правило для обработки файлов CSS:

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

- Теперь вы можете импортировать файлы CSS в свои модули JavaScript:

     import './styles.css';

2. С использованием mini-css-extract-plugin:
- Установите необходимые пакеты с помощью npm:

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

- В конфигурационном файле webpack добавьте плагин mini-css-extract-plugin:

     const MiniCssExtractPlugin = require('mini-css-extract-plugin');

     module.exports = {
       plugins: [
         new MiniCssExtractPlugin()
       ],
       module: {
         rules: [
           {
             test: /.css$/,
             use: [MiniCssExtractPlugin.loader, 'css-loader']
           }
         ]
       }
     }

- Теперь вы можете импортировать файлы CSS в свои модули JavaScript таким же образом, как и в первом способе.

3. С использованием css-modules:
- Установите необходимые пакеты с помощью npm:

     npm install --save-dev css-loader

- В конфигурационном файле webpack добавьте правило для обработки файлов CSS с использованием css-loader с опцией modules:

     module: {
       rules: [
         {
           test: /.css$/,
           use: [
             'style-loader',
             {
               loader: 'css-loader',
               options: {
                 modules: true
               }
             }
           ]
         }
       ]
     }

- Теперь вы можете импортировать файлы CSS в свои модули JavaScript и использовать их классы как объекты:

     import styles from './styles.css';

     console.log(styles.className); // className будет сгенерировано в зависимости от конфигурации css-loader

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