导入模块失败's css文件

Fail to import a module's css file

本文关键字：css 文件 模块 失败 导入      更新时间：2024-03-06

在我的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？

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

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

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

这三台装载机执行以下操作

  • 使用sass加载程序将scs文件转换为纯CSS
  • 在CSS加载器的帮助下解析CSS中的所有导入和url（…）
  • 使用样式加载器将这些样式插入到页面中

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

require('app.scss');

编辑：如果您不使用sass，则不需要sass加载程序，还需要更改test:/'.css$/

使用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']
    }]
  }
}

将加载器添加到config后，就可以在组件中导入css文件

相关文章：