загрузка CSS в Webpack

Question

Я пытаюсь включить загрузочный файл css в мое приложение, используя Webpack (v4.5), используя инструкции, найденные на официальном сайте (https://getbootstrap.com/docs/4.0/getting-started/webpack/), но получаю следующую ошибку при запуске webpack.

ERROR in ./node_modules/bootstrap/dist/css/bootstrap.min.css Module parse failed: Unexpected token (6:3) You may need an appropriate loader to handle this file type.

Я перепробовал все, что мог, чтобы заставить это работать, но я боюсь, что, возможно, упускаю что-то действительно очевидное.

Я импортирую CSS в свой код, используя: import 'bootstrap/dist/css/bootstrap.min.css';

И мой конфиг веб-пакета выглядит так:

  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      {
        test: /js$/,
        exclude: /(node_modules)/,
        loader: 'babel-loader',
        query: { presets: ['react-app'] },
      },

    ],
  }

У меня установлены css-loader и style-loader, и я использую ту же конфигурацию веб-пакета, которую загрузчик отображает в своих документах.

Кто-нибудь может увидеть, что я делаю не так?

Answer 1

Сделайте это первым

npm install --save-dev css-loader

, а затем это

npm install --save-dev style-loader

После установки измените вашу конфигурацию следующим образом

{
    test: /\.css$/,
    exclude: /node_modules/,
    use: ExtractTextPlugin.extract({
       fallback: "style-loader",
       use: [
           {
              loader: 'css-loader'
           },
           {
              loader: 'style-loader'
           }
        ]
    })
}