blueprint.js中的CSS无法正确加载

时间:2018-07-16 13:21:11

标签: javascript css reactjs blueprintjs

我在reactjs项目中使用来自blueprintjs的Filter Input,但是样式无法正确加载,这是我的代码:

Assigning.jsx

import './Assigning.scss';
export default class Assigning extends Component {
render() {
        return (
<div className="bp3-input-group modifier">
                        <span className="bp3-icon bp3-icon-filter" />
                        <input
                            type="text"
                            className="bp3-input modifier"
                            placeholder="Filter histogram..."
                        />
                    </div>
        );
    }
}

Assigning.scss

@import '~@blueprintjs/core/lib/css/blueprint.css';
@import '~@blueprintjs/icons/lib/css/blueprint-icons.css';

1 个答案:

答案 0 :(得分:0)

在导入开始时是否需要~字符? 它与我一起使用以下导入

import "@blueprintjs/table/lib/css/table.css";
import "@blueprintjs/icons/lib/css/blueprint-icons.css";

该组件的完整代码为

import React, { Component } from 'react';

class TestComponent extends Component {

  render() {

    return (
        <div className="bp3-input-group modifier">
        <span className="bp3-icon bp3-icon-filter" />
        <input
            type="text"
            className="bp3-input modifier"
            placeholder="Filter histogram..."
        />
    </div>
    );
  }
}

export default TestComponent;

我得到以下输出 Output of the above sample code