Fail to import a module's css file

Question

In my React project, I am using this gem for creating a dashboard: https://github.com/luqin/react-icheck

I copy pasted their first example in my code.

On the Github page, it says I should have import the css like this:

import 'icheck/skins/all.css'; // or single skin css

If I do that, I get the error:

ERROR in ./~/icheck/skins/all.css
Module parse failed: node_modules/icheck/skins/all.css Line 3: Unexpected token ILLEGAL
You may need an appropriate loader to handle this file type.
| /* iCheck plugin skins
| ----------------------------------- */
| @import url("minimal/_all.css");
| /*
| @import url("minimal/minimal.css");

If instead I do the import like this:

import 'icheck';

There is no more error, but the page doesn't have any checkbox.

So how can I do this import properly?

I also tried using style-loader so my code looks like this:

import React from 'react';
import {Checkbox, Radio} from 'react-icheck';
import 'icheck';
require("style!raw!icheck/skins/all.css");

var Criteria = React.createClass({

  getInitialState: function() {
    return {showGallery: false, showOtherCriteria: false};
  },

  toggleShowGallery: function() {
    this.setState({showGallery: !this.state.showGallery});
  },

  toggleShowOtherCriteria: function() {
    this.setState({showOtherCriteria: !this.state.showOtherCriteria});
  },

  render: function() {
    return (
        <div>

        <div onClick={this.toggleShowOtherCriteria} className="btn-group" role="group" aria-label="...">
          <button type="button" className="btn btn-default">Cold</button>
        </div>

        {style.use()}
        {this.state.showOtherCriteria
          ?

          <div onClick={this.toggleShowGallery} id="channels" className="span12">

            <Checkbox
              checkboxClass="icheckbox_square-blue"
              increaseArea="20%"
              label="Checkbox"
            />

            <Checkbox
              id="checkbox1"
              checkboxClass="icheckbox_square-blue"
              increaseArea="20%"
            />
            <label for="checkbox1">First name</label>

            <Radio
              name="aa"
              radioClass="iradio_square-blue"
              increaseArea="20%"
              label="Radio"
            />


          </div>
          :
          null
        }
        {style.unuse()}

        </div>
    );
  }
});

module.exports = Criteria;

However, now I get:

Module not found: Error: Cannot resolve module 'raw'

How could I use style-loader properly?

If you're using webpack, you'll need style-loader and css-loader — Yuya
– Yuya, Commented Apr 8, 2016 at 13:16
you'd need webpack.config.js to configure and use webpack loaders. — Yuya
– Yuya, Commented Apr 8, 2016 at 13:40

WitVault · Accepted Answer · 2016-04-08 15:07:28Z

1

In your webpack config loader section add

module: {
   loaders: [
      {
        test      : /\.scss$/,
        include   : path.join(__dirname, 'sass'),
        loaders   : ["style", "css?sourceMap", "sass?sourceMap"]
      }
    ]
  }

By adding this code you have added three loaders namely (style,css and sass).

These three loaders perform following operations

Turn your scss files into plain CSS with the sass loader
Resolve all the imports and url(...)s in the CSS with the help of CSS loader
Insert those styles into the page with the style loader

Then require your css file from the entry point of your app e.g app.js

require('app.scss');

Edit: If you are not using sass then you don't need sass loader, also you need to change test:/\.css$/

edited Apr 8, 2016 at 15:07

answered Apr 8, 2016 at 14:59

WitVault

24.2k20 gold badges107 silver badges137 bronze badges

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

3 Comments

bsky Over a year ago

I added the loader and I put this in index.jsx(the main jsx component): require("icheck/skins/all.css"); Now I get:

ERROR in ./~/icheck/skins/all.css Module parse failed: node_modules/icheck/skins/all.css Line 3: Unexpected token ILLEGAL You may need an appropriate loader to handle this file type.

WitVault Over a year ago

Have you added them as dependency inside package.json and installed these loader via npm install ?

bsky Over a year ago

Yes, I installed the packages and added the dependencies.

Aditya Singh · Accepted Answer · 2016-04-08 15:38:49Z

1

Add webpack to your devDependencies in package.json using npm i css-loader style-loader. After that add the css-loader and style-loader to your list of loaders in webpack.config.js. Sample

module.exports = {
  module: {
    loaders: [{
      test: /\.css?$/,
      loaders: ['style', 'css']
    }]
  }
}

Once you have added the loaders to config, you can import your css files in you components

edited Apr 8, 2016 at 15:38

answered Apr 8, 2016 at 15:21

Aditya Singh

16.8k15 gold badges49 silver badges70 bronze badges

6 Comments

bsky Over a year ago

I added that loader to the code. Now I get:

Line 1: Unexpected token ILLEGAL You may need an appropriate loader to handle this file type. (Source code omitted for this binary file)  @ ./~/css-loader!./~/icheck/skins/polaris/polaris.css 6:1430-1457

Aditya Singh Over a year ago

I have updated the loader names. Can you try with the updated one?

bsky Over a year ago

It's the same message but the error now appears in ERROR in ./~/icheck/skins/flat/[email protected]

Aditya Singh Over a year ago

I didn't get it. How is the error same if you its for .png file and not .css? Are you loading .png images dynamically as well?

bsky Over a year ago

Sorry, the messages is almost the same, but now for .png instead of .css so I seem to have made progress. If I change the code to test: /\.(png|css)?$/, the error becomes

ERROR in ./~/css-loader!./~/icheck/skins/polaris/polaris.png Module build failed: CssSyntaxError: /css-loader!= node_modules/icheck/skins/polaris/polaris.png:45:161: Unclosed quote

. In conclusion, it looks like it doesn't understand .png files. They are not mine, they belong to icheck.

|

Collectives™ on Stack Overflow

Fail to import a module's css file

2 Answers 2

3 Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related