如何在Webpack中使用语义UI进行响应? [英] How to use semantic-ui in react with webpack?

问题描述

我想使用CommonJS在我的react jsx文件中包含语义UI.我在bower上安装了语义UI，并且将webpack正确配置为包括bower_components目录.

I would like to use CommonJS to include semantic-ui in my react jsx file. I installed semantic-ui with bower, and webpack is correctly configured to include the bower_components directory.

但是，当我使用 require('semantic-ui/dist/semantic-ui.js')在jsx文件中，控制台始终会抛出错误未捕获的ReferenceError:未定义jQuery"，即使我在其前面放置了语句var jQuery = require('jquery/dist/jquery.js').

However, when I use require('semantic-ui/dist/semantic-ui.js') in the jsx file, the console always throw an error "Uncaught ReferenceError: jQuery is not defined", even when I put a statement var jQuery = require('jquery/dist/jquery.js') before that.

另一个相关的事情是，为了使语义UI正常工作，还应该包括语义.css.我也想知道如何在jsx文件中包含语义.css.

Another related thing is that in order for semantic-ui to work, semantic.css should also be included. I am also wondering how to include semantic.css in jsx file.

推荐答案

对于CSS，您将需要在采购JS之前将其加载到index/whatever.html文件中.

As for the CSS you're going to want to load that in your index/whatever.html file before sourcing your JS.

在需要语义UI之前，请尝试以下操作:

Try the following before you require semantic-ui:

var $ = jQuery = require('jquery/dist/jquery.js');
window.jQuery = $; // Assure it's available globally.
var s = require('semantic-ui/dist/semantic-ui.js');

不能100％地确定这是否可行，但是值得一试.

Not 100% sure this will work but it's worth a try.

CommonJS模块会使事情变得棘手.另外，可能值得研究React + Browserify.使用require导入NPM模块变得非常简单.

Things can get tricky with CommonJS modules. Also, might be worth looking into React+Browserify. Makes it super simple to import NPM modules using require.

这篇关于如何在Webpack中使用语义UI进行响应?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！