无法导入模块的 css 文件

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"]
      }
    ]
  }

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

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

• 使用 sass 加载程序将您的 scss 文件转换为纯 CSS
• 借助 CSS loader 解析 CSS 中的所有导入和 url(...)
• 使用样式加载器将这些样式插入页面

然后从应用程序的入口点请求您的 css 文件，例如 app.js

require('app.scss');

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

Answer 2

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

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

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