Semantic-ui: How to add semantic-ui with webpack

[swissarmybox]

How to add semantic ui with webpack?

neither import 'semantic-ui'; and import 'semantic-ui-css'; works.

Module not found: Error: Cannot resolve module 'semantic-ui-css' in /Users/christiansakai/Desktop/tr8r/client
@ ./client/index.js 17:0-26

[faller]

You can try this:
1.add bower dependencies "semantic-ui": "https://github.com/Semantic-Org/Semantic-UI.git#master"
2.require( 'bower-webpack-plugin' );

[swissarmybox]

@faller is this the normal way people require semantic-ui using webpack? what if I don't want to use bower

[faller]

@christiansakai I don't know if it is the nomal way. Since I maintain a fork of semantic-ui, I'd like to use bower-webpack-plugin.

[swissarmybox]

@faller I see. thanks for the response! I want to see what is the usual way for people to add semantic-ui using webpack.

[yesmeck]

This is what I am doing with semantic-ui and webpack.

├── semantic
│   ├── dist
│   ├── gulpfile.js
│   ├── src
│   └── tasks
├── semantic.json
├── src
│   ├── components
│   ├── config.js
│   ├── containers
│   ├── decorators
│   ├── helpers
│   ├── index.html
│   ├── index.js
│   ├── redux
│   ├── routes.js
└── webpack
    ├── dev.config.js
    ├── prod.config.js
    ├── test.config.js
    └── webpack-dev-server.js

// src/index.js
import '../semantic/dist/semantic.css';
import '../semantic/dist/components/dimmer';
import '../semantic/dist/components/transition';
import '../semantic/dist/components/dropdown';
import '../semantic/dist/components/modal';
import '../semantic/dist/components/rating';
import '../semantic/dist/components/tab';
import '../semantic/dist/components/popup';
import '../semantic/dist/components/sticky';

Import files under dist dir instead from node_modules/semantic-ui.

[swissarmybox]

@yesmeck ah thank you, I'll try this!

[theaidem]

For semantic modules:

import $ from 'jquery'
import jQuery from 'jquery'
window.jQuery = jQuery
require('../../vendor/semantic/dist/components/checkbox')

[swissarmybox]

@theaidem thanks. btw just wondering, is there a way to just include from node_modules and without building it to vendor?

[theaidem]

Actually I don't know. Maybe just manually install needs components like:

npm i -save semantic-ui-dropdown

and import/requre that from node_modules directly. I didn't try yet

[swissarmybox]

@theaidem ok I will try later, will report back here

[theaidem]

Works for me

npm i -save semantic-ui-popup semantic-ui-transition

import React, { Component } from 'react'
import $ from 'jquery'

import 'semantic-ui-popup/popup.css'
$.fn.popup = require('semantic-ui-popup')

import 'semantic-ui-transition/transition.css'
$.fn.transition = require('semantic-ui-transition')

and my React component works fine:

class Board extends Component {

    constructor(props) {
        super(props)
    }

    componentDidMount() {
        $('.example').popup({on: 'click', lastResort: true})
    }

    render() {
      return (
            <div className="ui icon button example" data-content="Awesome popup">
                <i className="add icon"></i>
            </div>
      )
    }

}

[jlukic]

nice example @theaidem

[swissarmybox]

@theaidem nice! works for me now!

[bgrayburn]

@theaidem : you use an icon in that example, I haven't been able to get webpack to load the icon images, do you know which loader or what else you had to do to get the icons to work?

[theaidem]

@bgrayburn if I correctly understand you, you should try "file-loader" like there https://github.com/theaidem/stapp/blob/master/webpack.config.prod.js#L44

[bgrayburn]

@theaidem awesome thanks! still muddling my way into webpack

[explorigin]

@theaidem @bgrayburn It kinda depends on what you want whether the file-loader is enough for you. I was trying to include the whole of semantic-ui.min.css the webpack way. Just using the file-loader will only grab the CSS file and not look inside it for dependences (the flags.png that @bgrayburn mentioned or font files). For that you need the css loader. However the urls in semantic are used in the relative fashion like url(themes/default/assets/images/flags.png). This is correct for CSS but conflicts with the webpack way of doing things. Webpack interprets "themes" as another module and hence can't find it. In order to make the urls webpack-friendly, they need to pre-pend a ./ like this: url(./themes/default/assets/images/flags.png)

[bgrayburn]

@explorigin thanks for the explanation. Do you know of any hacky workarounds in the meantime?

[explorigin]

You can @import the individual components that you need. Their included paths start with ../ which is valid. It doesn't suit my needs since I want/need the whole file.

[digitaldonkey]

For me it helped to change the fontPath variable.
After adding the following in semantic/src/site/globals/site.variables it worked for me.

@fontPath : '../assets/fonts';

[matantsu]

i'm really confused, is there a clear solution ? i just want a simple way to include semantic without getting shouts from the console

[explorigin]

@matantsu if you want the whole library included then you can either rebuild it following @digitaldonkey's instructions or you can wait for https://github.com/Semantic-Org/Semantic-UI/issues/3724 to be adopted and released.

If just certain parts of Semantic-UI are good enough for you, see my comment here.

[hadijaveed]

@theaidem Thank you!! You saved a lot of time for me !!

[afrianjunior]

How to add Semantic-ui to Webpack with vue-cli

https://github.com/Semantic-Org/Semantic-UI/issues/4620

[ghost]

What does your webpack config look like? I'm trying to get this working, but can't configure css and style loaders correctly it seems.

[quadsurf]

@yesmeck
you wrote: "Import files under dist dir instead from node_modules/semantic-ui"

In cli, I did: npm install --save semantic-ui-css semantic-ui-react

Then, in my webpack.config.js it looks like this:
module.exports = {
entry: [
'if not using node_modules, how do i know what the entry should be for semantic-ui-css so i can insert it here???',
'if not using node_modules, how do i know what the entry should be for semantic-ui-react so i can insert it here???',
'./app/app.jsx'
],
output: {
path: __dirname,
filename: './public/bundle.js'
}

Questions are in-line above in module.exports... please help!

Also, I love your directory structure... is there a repo where I can also see what's inside of each of those files (minus the private environment variables of course)???

[sanchil]

This seems to have worked for me. Seems ....because webpack is building on my laptop without throwing errors and I haven't really started working on semantic yet. A quick and a dirty way to start with semantic-ui for reactjs. Pre requisites are... you should have set up your project for babel with presets for es2015 and other required presets.

1- on the downloaded semantic ui zip file from here https://github.com/Semantic-Org/Semantic-UI-CSS/archive/master.zip

2- extract this into ur local js or css folder and add following line at the very beginning of semantic.js file

import jQuery from 'jquery'; //<- for this you should have downloaded the jquery as an npm module

3- add following loaders to webpack.config.js

{test:/\.svg$/,loader:'url-loader',query:{mimetype:'image/svg+xml',name:'./public/css/semantic/themes/default/assets/fonts/icons.svg'}},

{test:/\.woff$/,loader:'url-loader',query:{mimetype:'application/font-woff',name:'./public/css/semantic/themes/default/assets/fonts/icons.woff'}},

{test:/\.woff2$/,loader:'url-loader',query:{mimetype:'application/font-woff2',name:'./public/css/semantic/themes/default/assets/fonts/icons.woff2'}},

{test:/\.[ot]tf$/,loader:'url-loader',query:{mimetype:'application/octet-stream',name:'./public/css/semantic/themes/default/assets/fonts/icons.ttf'}},   

{test:/\.eot$/,loader:'url-loader',query:{mimetype:'application/vnd.ms-fontobject',name:'./public/css/semantic/themes/default/assets/fonts/icons.eot'}}

the paths to name parameter may differ for your setup.

4- on your root or boot up .js file like as in a root react component

add

import semantic from '../css/semantic/semantic.js';
import  '../css/semantic/semantic.css';

I always add all the js and css files for a component that way I only have one bundle.js linked up. I'm not sure the first import for semantic is the right way to do it either and the right way is probably

import * as semantic from '../css/semantic/semantic.js';

I'll know this only after I actually start using semantic. This seems to work to work for minified semantic files as well.

I did not do

npm install -save semantic-ui

And do the subsequent gulp builds. That is probably a better way to build your semantic project but I needed a way to avoid all the script and link tags in my html and directly access all the js files from the root react components.

[thejohnfreeman]

I faced this problem tonight (with the additional complication of building a Chrome extension) and wrote up my solution. Just in case it can help anyone here:

Semantic UI fonts with Webpack in a Chrome extension

[developer94404]

+1 to both previous posts; thanks for the help. I think these should be put somewhere into the instructions / installation page...

[3nvi]

For any people that are still facing this issue, i created a guide on how to integrate Webpack (2.x.x and 3.x.x) with Semantic UI Less. You can find it here:

Webpack 2 & Semantic UI Theming

[codeVerine]

After trying several solutions, finally this hack worked for me:

Adding aliases to webpack config to guide webpack to correct folders :smile:

alias: {
     'themes/default/assets': path.resolve(__dirname, '../../node_modules/semantic-ui-css/themes/default/assets'),
}

[havsar]

For me, it worked when I disabled/removed the modules option from css-loader:

css-loader?importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]