Webpack breaks when a css library is imported (Unexpected character '@')

[oguzgelal]

Node version: 8.5.0 npm version: 5.4.2 Operating system: macOS Sierra 10.12.6 Command line used: npm start -s

Description

Webpack breaks when a css library is imported. In my case, I was trying to install bulma, I imported it in index.js (entry point), and I got this following error:

ERROR in ./node_modules/bulma/css/bulma.css
Module parse failed: /Users/oguzgelal/Core/Oguz/web/TKVR/trackist/node_modules/bulma/css/bulma.css Unexpected character '@' (2:0)
You may need an appropriate loader to handle this file type.
| /*! bulma.io v0.6.0 | MIT License | github.com/jgthms/bulma */
| @-webkit-keyframes spinAround {
|   from {
|     -webkit-transform: rotate(0deg);
 @ ./src/index.js 21:0-46
 @ multi ./src/webpack-public-path react-hot-loader/patch webpack-hot-middleware/client?reload=true ./src/index.js

Steps to reproduce:

1) Install bulma (possibly reproducible with any libraries that you have to include a css file)

npm install bulma --save

2) On index.js:

import '../node_modules/bulma/css/bulma.css';

3) Run:

npm start -s

Solution

Modifying webpack configuration as below solved the issue for me:

From:

{
        test: /(\.css|\.scss|\.sass)$/,
        exclude: /node_modules/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            ...
          },
          {
            loader: 'postcss-loader',
            ...
          },
          {
            loader: 'sass-loader',
            ...
          }
        ]
      }

To:

{
        test: /\.css$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            ...
          },
          {
            loader: 'postcss-loader',
            ...
          }
        ]
      },
      {
        test: /(\.scss|\.sass)$/,
        exclude: /node_modules/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            ...
          },
          {
            loader: 'postcss-loader',
            ...
          },
          {
            loader: 'sass-loader',
            ...
          }
        ]
      }

[oguzgelal]

Sorry, the problem was the exclude: /node_modules/ line, since its being excluded webpack was simply ignoring the css file.

[nickytonline]

Glad you were able to figure it out @oguzgelal!

[pandiyan07]

Thank you very much @oguzgelal bro. I have been squeezing my brain out trying to figure out what's the problem with my webpack.config file for the last couple of days. Thank god your answer showed up ATLASTTTTT.........such a great relief now..... :):):)