Docs about webpack + custom css #802

bali182 · 2016-11-07T14:09:29Z

I never managed to make the original semantic UI work with webpack AND with a custom css theme (there are numerous guides about how you can "force" it to work by either creating the whole semantic structure or loading one of the less or css packages and fiddling with stuff inside node_modules, but I was looking for - and still am - a clean solution).

What the docs says about CSS is not very helpful currently: http://react.semantic-ui.com/usage#semantic-ui-css-package which translates to either use the default themes or you have to modify stuff inside node_modules.

I'm curious, are there any plans of a better way of dealing with styling? What is the recommended way currently if someone wants to change a few things preferably using less? Is it possible without putting the whole semantic folder structure inside user code and with this managing a duplicate of the dependency under version control?

The text was updated successfully, but these errors were encountered:

levithomason · 2016-11-07T16:22:56Z

It is important to remember that all React is doing is rendering down to HTML. Imagine you had an HTML page with a Semantic-UI Button on it:

<html>
<head>
  <meta charset="UTF-8">
  <title>Semantic UI</title>
</head>
<body>
  <button class="ui button">Click Here</button>
</body>
</html>

How would you go about adding style to this HTML page? You'd probably add a link tag with the Semantic-UI CSS:

<html>
<head>
  <meta charset="UTF-8">
  <title>Semantic UI</title>
  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.6/semantic.css">
</head>
<body>
  <button class="ui button">Click Here</button>
</body>
</html>

This is exactly what is happening with React and Semantic-UI-React. When Semantic-UI-React components render, they are rendering normal Semantic-UI HTML. So, you style it just as you would normally style an HTML page with Semantic-UI HTML, using any Semantic-UI stylesheet. if you wanted a custom stylesheet, you should create a Semantic-UI theme and include the final built CSS for that instead.

Hope that helps some for now. We get this question a lot and there have been plenty of others who are confused by this, so I'll leave this issue open. I'd like to add at least one minimal working example to the repo and a better explanation of what Semantic-UI-React is and how it fits into the development stack. Thanks for raising this issue.

bali182 · 2016-11-07T22:00:29Z

Hey, thanks for taking the time to answer! You are absolutely right, this shouldn't be the responsibility of the a package dedicated to react components, I'm just looking for a webpack friendly way to get customized css working, and was curious how you do it! Will check out the core semantic docs, maybe there are some news on the less/css front :)

jeffcarbs · 2016-11-07T22:55:55Z

@bali182 - I found this blog post super helpful in setting up SemanticUI + webpack with a custom theme: https://www.artembutusov.com/webpack-semantic-ui/

If you're using semantic-ui-react just ignore anything in that tutorial related to javascript.

My particular setup is basically:

add semantic-ui-less to your package.json
add lib/semantic-ui with custom site css:
- lib/semantic-ui/semantic-ui.css which just imports the different modules
- lib/semantic-ui/theme.config with @siteFolder set to '../../src/lib/semantic-ui/site';
then in my main.js: import 'lib/semantic-ui/semantic-ui.less'

If you're using CSS modules, you'll need to explicitly prevent it from running on lib/semantic-ui/semantic-ui.less

Most of this is covered in that blog post I referenced. Hope this helps!

rachelslurs · 2017-06-02T18:03:17Z

Still running into a lot of issues. Tried following the instructions in the link as well as in the last comment. I think the part I'm having an issue with is:

If you're using CSS modules, you'll need to explicitly prevent it from running on lib/semantic-ui/semantic-ui.less

When you say css modules, do you mean things like less-loader, css-loader, and the like? How do you prevent it from running on all of the files it's importing?

uli28 · 2017-09-01T18:01:46Z

Way to go without semantic-ui-less:

$ npm install semantic-ui --save-dev
Follow instructions, be aware that semantic.json is in root folder.

You can add your theme like shown in this tutorial. http://g14n.info/2016/11/react-semantic-customized/
Included are the themes basic,default,github,material. (you can change /src/theme.config to one of those 4)
gulp-build (after changing)

include "import '../semantic/dist/semantic.min.css';" to index.js to load that customized css.

darewreck54 · 2017-09-27T09:58:32Z

@uli28 @bali182

From reading your post, please correct me if my understanding is incorrect:

Install semantic-ui which will generate folders:

/semantic
/semantic/src/themes {contains all the customize themes you want}
/semantic/semantic.json
etc.

This basically allows you to build the style sheet which you would you would then import into your project. When you run gulp build-css and build-assets, it will generate

/dist/components (styles for each component)
/dist/themes (fonts/images)
/dist/semantic.css
/dist/semantic.min.css

You can also move the generate dist to any project you want that support semantic-ui with the customized theme. When you use react semantic ui, all you need to do is include the semantic.min.css in the index.js and it will pick up the changes?

Also what is the difference between semantic.min.css and the styles in component/. I looks like semantic.min.css has everything that component/ has. Is there a reason for this?

And if my webpack is configure to load both css and less files, then this should be sufficient? What is the purpose of semantic-ui-less?

Thanks,
Derek

p3nGu1nZz · 2017-09-27T18:15:08Z

Ran into a similar issue like this with GXT some years back. The setup script of semantic-ui hangs when i add it with yarn to my electron react (cra) application. I also dont use gulp for my build process, so im not really liking having to break/adjust that.

Wouldn't a better way to do this is to create a new project to build your theme in, and roll it up into your own semantic-css-yourtheme npm package that you can include the min css into your parent project?

It just seems so wasteful to having to all of the core source code to make the styles work to just adjust the theme. I also don't feel like a project would be modifying the theme much after your make it once.

The end result is just adding the theme package to your project and import the min.css. Any specific customization i imagine you could override with inline or supplementary css link after you load the theme css.

Also seems like by forking the semantic-css repo you will be ensured to get all of the latest and greatest, and merge according.

levithomason · 2017-09-28T17:46:59Z

Wouldn't a better way to do this is to create a new project to build your theme in, and roll it up into your own semantic-css-yourtheme npm package that you can include the min css into your parent project?

Yes

It just seems so wasteful to having to all of the core source code to make the styles work to just adjust the theme. I also don't feel like a project would be modifying the theme much after your make it once.

Also agreed.

The issue here is a missing theme customizer. The blocker to that is a willing and able team. I would love nothing more than to get the chance to build this, but I have no time nor funding for it.

This is wildly popular enough, that I may put a bounty up for it. I have several ideas for how to do this short term and long term. The theme builder would be superb and would integrate into the doc site for previewing/testing.

I would base it on my older work for a Bootstrap theme customizer:

You would have high-level controls for setting theme values, they would update the preview live, and you would download the stylesheets. Long term, this would customize a theme JS object for a future CSS-in-JS solution.

I will eventually get to this, but I have no idea when.

p3nGu1nZz · 2017-09-28T22:01:57Z

@levithomason that's pretty snazzy. I have seen a couple other theme editors like this and love the idea of it. I think i might start working on this, since I could not find anyone else working on this. Ill dive into this more in the next week or two.. I have a good idea on how to integrate this nicely with semantic-ui and have made an editor like this for GWT, ExtJS, and GXT in the past. Accepting donations ;)

levithomason · 2017-09-28T22:05:44Z

Awesome, I'd love to collaborate. Also, @brianespinosa and I were just talking over in #1009 (comment) about a similar related venture.

I'd like to get us all together and get a plan going. This way, we can collect our efforts and hopefully get some community support also. I will try to scaffold the repo tonight or this weekend.

Can't wait to hash this out! 🎉

levithomason · 2017-09-28T22:19:44Z

I've kickstarted the convo, see here: openmastery/semantic-ui-theme#1

p3nGu1nZz · 2017-09-28T22:26:52Z

okay great.

DesignByOnyx · 2017-11-17T19:29:08Z

I found the semantic-ui processes to be invasive and cumbersome, requiring unnecessary build tools and too many side effects on my project.

I found the blog post mentioned above to be very close to a good solution, but still found it unsatisfactory and a bit cumbersome. It did inspire me so I wrote this: https://gist.github.com/DesignByOnyx/c5d6bc8440479d7213ac157135544954

It allows users to decide where semantic-ui-less assets are stored, and all assets are stored inside a single directory (no other side effects on the project). I've tested this extensively on my current project, but I would love some feedback on how to make it better.

dongcai · 2017-12-04T02:22:34Z

@rachelslurs It has been a while, I think you might already figured this out:

When you say css modules, do you mean things like less-loader, css-loader, and the like? How do you prevent it from running on all of the files it's importing?

I actually had this issue when I followed this link provided in #802 (comment)
I think @jeffcarbs meant the 'modules' option in css-loader, for example:

test: /\.less$/,
  loader: ExtractTextPlugin.extract({
    fallback: 'style-loader',
    use: [
      {
        loader: 'css-loader',
        options: {
          modules: true,
          importLoaders: 2,
          sourceMap: true
        }
      }
    ]}) ...

you have to set "modules" to "false", or just commented it out. Otherwise, it will hash the semantic-ui-less' classname.

In case you use https://github.com/bertho-zero/react-redux-universal-hot-example, I forked the repository to implement it with semantic-ui instead of bootstrap. The repo is here: https://github.com/dongcai/react-redux-semantic-ui

Hope this helps.

bali182 added the docs label Nov 7, 2016

jeffcarbs closed this as completed Nov 7, 2016

levithomason mentioned this issue Nov 20, 2016

Simple way to add theme #903

Closed

levithomason mentioned this issue Dec 9, 2016

RFC: Theming support #1009

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Docs about webpack + custom css #802

Docs about webpack + custom css #802

bali182 commented Nov 7, 2016 •

edited

Loading

levithomason commented Nov 7, 2016 •

edited

Loading

bali182 commented Nov 7, 2016

jeffcarbs commented Nov 7, 2016 •

edited

Loading

rachelslurs commented Jun 2, 2017

uli28 commented Sep 1, 2017

darewreck54 commented Sep 27, 2017 •

edited

Loading

p3nGu1nZz commented Sep 27, 2017 •

edited

Loading

levithomason commented Sep 28, 2017

p3nGu1nZz commented Sep 28, 2017

levithomason commented Sep 28, 2017 •

edited

Loading

levithomason commented Sep 28, 2017

p3nGu1nZz commented Sep 28, 2017

DesignByOnyx commented Nov 17, 2017 •

edited

Loading

dongcai commented Dec 4, 2017 •

edited

Loading

Docs about webpack + custom css #802

Docs about webpack + custom css #802

Comments

bali182 commented Nov 7, 2016 • edited Loading

levithomason commented Nov 7, 2016 • edited Loading

bali182 commented Nov 7, 2016

jeffcarbs commented Nov 7, 2016 • edited Loading

rachelslurs commented Jun 2, 2017

uli28 commented Sep 1, 2017

darewreck54 commented Sep 27, 2017 • edited Loading

p3nGu1nZz commented Sep 27, 2017 • edited Loading

levithomason commented Sep 28, 2017

p3nGu1nZz commented Sep 28, 2017

levithomason commented Sep 28, 2017 • edited Loading

levithomason commented Sep 28, 2017

p3nGu1nZz commented Sep 28, 2017

DesignByOnyx commented Nov 17, 2017 • edited Loading

dongcai commented Dec 4, 2017 • edited Loading

bali182 commented Nov 7, 2016 •

edited

Loading

levithomason commented Nov 7, 2016 •

edited

Loading

jeffcarbs commented Nov 7, 2016 •

edited

Loading

darewreck54 commented Sep 27, 2017 •

edited

Loading

p3nGu1nZz commented Sep 27, 2017 •

edited

Loading

levithomason commented Sep 28, 2017 •

edited

Loading

DesignByOnyx commented Nov 17, 2017 •

edited

Loading

dongcai commented Dec 4, 2017 •

edited

Loading