benim Tepki projede bir modülün css dosyasını

Question

ithal etmek Fail, ben bir gösterge tablosu oluşturmak için bu taş kullanıyorum: Benim kodunda ilk örneği yapıştırılan kopya https://github.com/luqin/react-icheck

. Github sayfada

, ben içeri aktarmak üzere böyle css olmalı diyor ki: bunun yerine ithalat yaparsanız

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

: Bunu yaparsanız

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

, hatası alıyorum bunun gibi:

import 'icheck'; 

Başka bir hata daha var, ama sayfa yok kbox.

Bu içe aktarmayı nasıl düzgün yapabilirim? Ayrıca style-loader kullanarak çalıştı

yani benim kod şöyle görünür:

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; 

Ancak, şimdi olsun:

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

nasıl düzgün style-loader kullanabilirsiniz? senin webpack yapılandırma yükleyici bölümünde

Answer 1

sen yani üç yükleyiciler eklemiş bu kodu (stil, css ve küstahlık) ekleyerek

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

ekleyin.

Bu üç yükleyiciler CSS yardımıyla CSS'deki küstahlık yükleyici

Çöz tüm ithalat ve url (...) ler ile düz CSS içine SCSS dosyaları açın

aşağıdaki işlemleri

gerçekleştirmek yükleyici

• app.js

Ardından uygulama örn giriş noktasından sizin css dosyasını gerektiren tarzı yükleyici ile sayfanın içine bu stilleri ekleme

require('app.scss'); 

Düzenleme: o zaman küstahlık yükleyici gerekmez küstahlığı kullanmıyorsanız, ayrıca

Answer 2

test:/\.css$/ senin devDependenciespackage.json yılında npm i css-loader style-loader kullanmanın webpack ekle değiştirmeniz gerekir. Bundan sonra webpack.config.js'daki yükleyiciler listenize css-loader ve style-loader ekleyin.Numune

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

Eğer WebPack kullanıyorsanız, size `stil-loader` ve` css-yükleyici gerekir