在Webpack中加载CSS

Question

I am trying to include the bootstrap css file in my app using Webpack (v4.5) using the instructions found on the offical website ( https://getbootstrap.com/docs/4.0/getting-started/webpack/ ) but am getting the following error when running 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.

I have tried all I can think of to get this working but am afraid I am probably missing something really obvious.

I import the css into my code using: import 'bootstrap/dist/css/bootstrap.min.css';

And my webpack config looks like:

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

    ],
  }

I have both css-loader and style-loader installed and am using the same webpack config that bootstrap displays in their docs.

Can anyone see what I am doing wrong?

Answer 1

Do this first

npm install --save-dev css-loader

and then this

npm install --save-dev style-loader

After installing change your configuration like this

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