Question

在我的React项目中，我使用此gem来创建仪表板：https://github.com/luqin/react-icheck

我在我的代码中复制了他们的第一个例子。

在Github页面上，它说我应该像这样导入css：

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

如果我这样做，我会收到错误：

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

如果我这样做导入：

import 'icheck';

没有更多错误，但页面没有任何复选框。

那我怎样才能正确导入呢？

我也尝试使用style-loader，因此我的代码如下所示：

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;

然而，现在我得到了：

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

我如何正确使用style-loader？

Answer 1

在您的webpack配置加载程序部分添加

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

通过添加此代码，您添加了三个加载器，即（style，css和sass）。

这三个加载器执行以下操作

使用sass loader
借助CSS loader
使用样式加载器

然后从你的应用程序的入口点需要你的css文件，例如app.js

require('app.scss');

编辑：如果你没有使用sass，那么你不需要sass loader，你也需要更改test:/\.css$/

Answer 2

使用webpack将devDependencies添加到package.json中的npm i css-loader style-loader。之后，将css-loader和style-loader添加到webpack.config.js中的加载程序列表中。样品

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

将加载程序添加到配置后，您可以在组件中导入css文件

无法导入模块的css文件

2 个答案: