Как с помощью webpack объединить несколько css не из директории проекта в один файл?

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

Первым шагом будет установка необходимых плагинов и загрузчиков. Установите следующие зависимости через npm:

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

После установки плагина mini-css-extract-plugin и загрузчика css-loader, вам понадобится настроить webpack.config.js файл, чтобы указать Webpack, как объединить CSS файлы.

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

module.exports = {
  // Ваша конфигурация Webpack
  module: {
    rules: [
      {
        test: /.css$/,
        use: [
          MiniCssExtractPlugin.loader, // Используйте MiniCssExtractPlugin для извлечения CSS в отдельные файлы
          'css-loader' // Загрузка и обработка CSS файлов
        ]
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: 'bundle.css' // Имя файла, в который будет объединено CSS
    })
  ]
};

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

import './path/to/first.css';
import './path/to/second.css';

Когда вы запустите сборку Webpack, все импортированные CSS файлы будут объединены и сохранены в указанном вами файле bundle.css.

Таким образом, использование MiniCssExtractPlugin и css-loader в сочетании с правильной конфигурацией Webpack позволяет объединить несколько CSS файлов из разных директорий в один файл.