结合使用语义用户界面和电子

Question

我对我的项目环境的配置感到头疼。基本上，我将使用电子+ react + redux + semantic-ui-react。

我已经完成了配置: electron+react。现在我正在尝试使用semantic-ui-react。

我添加了依赖，安装了gulp和semantic-ui，但它不起作用。

 "scripts": {
    "start": "electron .",
    "babel": "babel",
    "webpack": "webpack"
 }
 "dependencies": {
    "electron": "^1.8.2",
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "semantic-ui": "^2.3.0",
    "semantic-ui-react": "^0.78.3"
  },
  "devDependencies": {
    "babel-core": "^6.18.2",
    "babel-loader": "^6.2.7",
    "babel-preset-es2015": "^6.18.0",
    "babel-preset-react": "^6.16.0",
    "react": "^15.3.2",
    "react-dom": "^15.3.2",
    "webpack": "^1.13.3"
  }

当我输入：npm run start时，电子窗口出现，但是没有我添加到app.js (渲染的react容器)中的语义ui组件。

import React from "react";
import ReactDOM from "react-dom";
import {Button, Checkbox} from 'semantic-ui-react';

class App extends React.Component {
    constructor() {
        super();
    }

    render() {
        return (
            <div>
                <Button onClick={()=> {}}>Xxx</Button>
                <Checkbox label='Make my profile visible' />
                <h1> App </h1>
            </div>
        );
    };
}

ReactDOM.render(<App/>, document.getElementById("root"));

有没有人能提个建议？；)

提前谢谢你。

Answer 1

好了，我终于处理好了。

安装semantic-ui-css并添加

<script
        src="https://code.jquery.com/jquery-3.1.1.min.js"
        integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
        crossorigin="anonymous"></script>
<script src="semantic/dist/semantic.min.js"></script>

发送到您的index.html

Answer 2

尝试像这样在你的index.html中添加。然后，再次运行yarn start：

<link
      rel="stylesheet"
      type="text/css"
      href="../node_modules/semantic-ui-css/semantic.min.css"
    />

它可以帮助你解决所有css导入电子相关的问题。