Question

我已经通过npm安装了语义ui。它目前位于 node_modules 内，并内置于/ dist /中。看起来像这样：

"devDependencies": {
    "babel": "^6.5.2",
    "babel-core": "^6.11.4",
    "babel-loader": "^6.2.4",
    "babel-preset-es2015": "^6.9.0",
    "babel-preset-react": "^6.11.1",
    "react": "^15.3.0",
    "react-dom": "^15.3.0",
    "react-hot-loader": "^1.3.0",
    "webpack": "^1.13.1",
    "webpack-bundle-tracker": "0.0.93",
    "webpack-dev-server": "^1.14.1"
  },
  "dependencies": {
    "semantic-ui": "^2.2.2"
  }

文件结构看起来像......

 /node_modules/
        |- ...
        |- semantic-ui
               |- dist
                    |- components
                    |- themes
                    |- semantic.min.css
                    |- semantic.min.js

在我的反应组件 app.jsx 中，我导入react，react-dom，jquery，但它似乎与semantic-ui有关 -

import React, { PropTypes } from 'react';
import ReactDOM from 'react-dom';
import $ from 'jquery';
import * from 'semantic-ui';


ERROR in ./assets/js/app.jsx
Module build failed: SyntaxError: /Users/maude/Projects/coffee/assets/js/app.jsx: Unexpected token (4:9)
  2 | import ReactDOM from 'react-dom';
  3 | import $ from 'jquery';
> 4 | import * from 'semantic-ui';

为什么导入这个问题？如何将semantic-ui css / js引入我的项目？

Answer 1

如果您只想导入整个模块的副作用，而不导入任何绑定，请写：

import 'semantic-ui';

否则，您需要为其命名：

import * as semantic from 'semantic-ui';

虽然它可能有默认导出，但您只需编写：

import semantic from 'semantic-ui';

编辑：虽然对于语义ui，导入过程似乎与您预期的有些不同。看看this discussion。

Answer 2

使用语义ui-css不应该给任何地方带来尽可能多的痛苦，因为它并不意味着被黑客攻击（定制）。而简单地安装语义ui将不会为你提供＆＃34;东西＆＃34;而是要求你配置webpack，或者任何自定义css框架涉及 - 一次配置组件并导入它。

在npm install semantic-ui-css：

之后，在main.js中（或在其中实例化反应的地方）

window.$ = window.jQuery = require('jquery')
require('semantic-ui-css/semantic.css')
require('semantic-ui-css/semantic.js')

将语义ui导入反应组件

2 个答案: