CODEWITHSUNDEEP
javascripthtmlcssreactjs
bsky
bsky

Reputation: 20222

Fail to import a module's css file

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?

Upvotes: 2

Views: 2692

Answers (2)

Aditya Singh
Aditya Singh

Reputation: 16650

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

Upvotes: 1

WitVault
WitVault

Reputation: 24130

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$/

Upvotes: 1

Related Questions