Fehler eines Moduls CSS-Datei

Question

In meinem Reagieren Projekt zu importieren, ich dieses Juwel bin mit einem Armaturenbrett für die Erstellung von: https://github.com/luqin/react-icheck

ich ihr erstes Beispiel in meinem Code eingefügt kopieren.

Auf der Github Seite, heißt es mir Import sollte die css wie diese:

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

Wenn ich das tun, erhalte ich die Fehlermeldung:

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"); 

Wenn stattdessen ich den Import tun wie folgt:

import 'icheck'; 

Es gibt keinen Fehler mehr, aber die Seite hat keinen chec kbox.

Also wie kann ich diesen Import richtig machen?

Ich habe auch versucht mit style-loader so sieht mein Code wie folgt aus:

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; 

Aber jetzt erhalte ich:

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

Wie könnte ich style-loader richtig zu nutzen?

Answer 1

In Ihrem webpack Abschnitt Config-loader

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

diesen Code hinzufügen, indem Sie drei Ladern nämlich hinzugefügt haben (Stil, CSS und sass).

Diese drei Ladern führen folgende Operationen

• Ihre SCSS Dateien in Klar CSS mit dem sass loader Drehen
• Resolve alle Importe und url (...) s in der CSS mit Hilfe von CSS loader
• diese Stile in die Seite mit dem Lader Stil

benötigen dann Ihre CSS-Datei aus dem Einstiegspunkt Ihrer Anwendung zB Legen app.js

require('app.scss'); 

Edit: Wenn Sie nicht sass verwenden, dann tun Sie sass loader nicht benötigen, auch müssen Sie test:/\.css$/

Answer 2

webpack in Ihre devDependencies in package.jsonnpm i css-loader style-loader mit ändern. Danach fügen Sie die css-loader und style-loader zu Ihrer Liste der Lader in webpack.config.js hinzu.Probe

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

Sobald Sie die Loader Config hinzugefügt haben, können Sie Ihre CSS-Dateien in Sie Komponenten importieren können