Как правильно подключить 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>.

@craig.emmerich 

Описанный выше метод является одним из способов подключения CSS в Webpack с помощью style-loader и css-loader. Он предполагает использование модулей JavaScript для импорта и обработки CSS файлов.

Если вы хотите использовать другие подходы, например, использовать MiniCssExtractPlugin для извлечения CSS в отдельные файлы, это также можно настроить в файле конфигурации Webpack.

Вот пример использования MiniCssExtractPlugin для извлечения CSS в отдельный файл:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20

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

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

Затем в вашем JavaScript-коде вы можете импортировать CSS-файл так же, как показано выше:

1

import './styles.css';

После этого, при сборке проекта с помощью Webpack, стили будут извлечены в отдельный CSS-файл (styles.css).

Выбор конкретного метода зависит от ваших потребностей и предпочтений.