2016-04-08 13 views
0

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-icheckbenim Tepki projede bir modülün css dosyasını

. 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

+1

Eğer bileşenleri içinde css dosyalarını içe aktarabilir, yapılandırma için yükleyici ekledikten sonra ' – Kujira

+0

'style-loader' işlevini kullanmak için kodumu güncelledim. – octavian

+0

webpack yükleyicilerini yapılandırmak ve kullanmak için webpack.config.js'ye ihtiyacınız var. – Kujira

cevap

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

  • +0

    Yükleyiciyi ekledim ve bunu "index.jsx" (ana "jsx" bileşeni): "gerektiriyor (" icheck/skins/all.css ");' Artık şunu alıyorum: 'ERROR in ./~ /icheck/skins/all.css Modül ayrıştırılamıyor: node_modules/icheck/skins/all.css Satır 3: Beklenmeyen belirteç ILLEGAL Bu dosya türünü işlemek için uygun bir yükleyiciye ihtiyacınız olabilir. ' – octavian

    +0

    Bunları içeriğe bağımlı olarak eklediniz 'package.json' ve bu yükleyiciyi' npm install' üzerinden yüklediniz mi? – WitVault

    +0

    Evet, paketleri yükledim ve bağımlılıkları ekledim. – octavian

    1

    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

    +0

    Yükleyiciyi koda ekledim. Şimdi anladım: 'Satırı 1: Beklenmeyen belirteç ILLEGAL Bu dosya türünü işlemek için uygun bir yükleyiciye ihtiyacınız olabilir. (Bu ikili dosya için kaynak kodu atlandı) @ ./~/css-loader!./~/icheck/skins/polaris/polaris.css 6: 1430-1457' – octavian

    +0

    Yükleyici adlarını güncelledim. Güncellenmiş olanı deneyebilir misin? –

    +0

    Aynı mesaj ancak hata şu an 'HATA içinde./~/Icheck/skins/flat/purple @ 2x.png' – octavian

    İlgili konular