Webpack errors when importing css

Question

When including css with my webpack build, i get the following error:

ERROR in ./~/bootstrap/dist/css/bootstrap.css
Module parse failed:     /Users/myuser/Projects/project/node_modules/bootstrap/dist/css/bootstrap.css Unexpected token (8:5)
You may need an appropriate loader to handle this file type.
|  */
| /*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */
| html {
|   font-family: sans-serif;
|   line-height: 1.15;
 @ ./assets/js/index.js 33:4-47
 @ multi webpack-dev-server/client?http://0.0.0.0:3000 webpack/hot/only-dev-server ./assets/js/index

The offending line in my index.js is: import 'bootstrap/dist/css/bootstrap.css'

My webpack.config.js looks like this: https://gist.github.com/colde/a0db7ca1a2d0a4596bc10241a6c55740

Shot in the dark, but in your CSS section, try this loader: loader:'style!css!' — justDan
– justDan, Commented Feb 7, 2017 at 20:04

Michael Jungo · Accepted Answer · 2017-02-14 21:38:33Z

2

In your webpack config you define the css loader as follows:

{
  test: /\.css$/,
  exclude: /(node_modules|bower_components)/,
  loader: "style-loader!css-loader"
}

Because bootstrap is a module you installed either from npm or bower, it is either in the node_modules or the bower_compoents directory. But you're excluding both from the loader and therefore webpack tells you that you need to configure an appropriate loader for it. Simply remove the exclude option to make it work correctly:

{
  test: /\.css$/,
  loader: "style-loader!css-loader"
}

answered Feb 14, 2017 at 21:38

Michael Jungo

33.2k4 gold badges97 silver badges87 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Webpack errors when importing css

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related