Как правильно подключить css в webpack?

@craig.emmerich 

В Webpack существует несколько способов подключения CSS. Один из распространенных способов - использование style-loader и css-loader.

1. Установите style-loader и css-loader в вашем проекте:

1

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

1. Создайте файл конфигурации для Webpack (webpack.config.js) и добавьте правила для обработки CSS:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

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

1. В вашем JavaScript-коде импортируйте CSS-файл, который вы хотите подключить:

1

import './styles.css';

1. Запустите сборку проекта с помощью команды webpack и убедитесь, что CSS-файл правильно подключается к вашему проекту.

Теперь при сборке проекта Webpack будет обрабатывать импортированный CSS-файл и вставлять его стили в HTML-файл в тег <style>.