Problems with css processing when building with webpack only

[emacsuser123]

Hello.

I'm trying to build a project using webpack v1, using react-icheck, but it seems there is a problem with configured loaders:

ERROR in ./~/icheck/skins/all.css Module parse failed: /mydir/node_modules/icheck/skins/all.css Unexpected character '@' (3:0) You may need an appropriate loader to handle this file type. SyntaxError: Unexpected character '@' (3:0)

My webpack conf file looks like the following:

  module: {
    loaders: [
      {
        test: /\css$/,
        include: app_dir + '/css',
        exclude: [node_modules_dir],
          loaders: ['style-loader', 'css-loader', 'sass-loader']
      },

The three loaders are installed, but somehow they are unable to parse the css files.

I'm trying to keep the minimal configuration, not using gulp, just webpack.

If I use gulp, as per the react-icheck structure, then everything goes fine. But usig webpack only, there seems to be an issue with configured loaders.

Any idea?

Thanks a lot. -Bob V

[luqin]

  module: {
    loaders: [
      {
        test: /\css$/,
        include: app_dir + '/css',
          loaders: ['style-loader', 'css-loader', 'sass-loader']
      },

[emacsuser123]

Hi Luqin. The problem is not that the (s)css file is not found by webpack. In fact, it is found, and there is an error trying to parse it. It says that I may need an appropriate loader ....

ERROR in ./app/css/style.scss
Module parse failed: /home/app/css/style.scss Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (1:0)

Where the style.scss file is the same file that you use in your example code.

Loaders are configured exactly the way you mention, and they are installed. Also, node-sass is installed.

If I run on the command line: $ ./node_modules/.bin/node-sass app/css/style.scss test.css

It goes OK, and the css file is generated successfully by node-sass.

So, there has to be something with the way loaders are configured or so in the webpack config file, but I am unable to find it out.

Thanks a lot. -Bob V

[emacsuser123]

Ok, I think I have narrowed down the problem. My "local" style.scss file now is processed successfully by webpack loaders. I think the problem was not to be using the right paths in the include/exclude statements, in webpack config file.

Now, there is another problem, this time related to image files.

The App.js file does the following:

import 'bootstrap/dist/css/bootstrap.css';
import 'icheck/skins/all.css';

Now, when I run ./node_modules/.bin/webpack, I get errors when parsing all.css and bootstrap.css files.

Something like this:

ERROR in ./~/icheck/skins/flat/flat@2x.png
Module parse failed: /home/app/node_modules/icheck/skins/flat/flat@2x.png Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected character '�' (1:0)

...
 @ ./~/css-loader!./~/icheck/skins/flat/_all.css 6:1232-1256

There are many errors like the one above.

I guess I should be installing some webpack image loaders in order to make it run ok. Is that right?

Thanks a lot. -Bob V

[emacsuser123]

Hello. I have solved it. Once I have installed and configured the corresponding image/ttf/eot/... loaders, everything goes ok.

Thanks.

[luqin]

@emacsuser123 :+1: