In my React project, I have incorporated a dashboard using https://github.com/luqin/react-icheck
I followed their initial example and implemented it in my code.
According to the instructions on the Github page, I should import the css as shown below:
import 'icheck/skins/all.css'; // or single skin css
When I follow this import method, I encounter an 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");
Alternatively, if I import like this:
import 'icheck';
The error disappears, but there are no checkboxes displayed on the page.
How can I correctly implement this import?
I also attempted to use the style-loader in the following way:
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 receive the following error:
Module not found: Error: Cannot resolve module 'raw'
What is the correct way to utilize the style-loader?