Question

我对项目环境的配置感到头疼。基本上我会使用电子+反应+还原+语义 - 反应。

我已经完成的是配置：电子+反应。现在我正在尝试使用语义 - 反应。

我添加了依赖项，安装了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的语义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

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

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

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

使用语义ui与电子

1 个答案: