Can't find theme.config about semantic-ui-less

[cmnstmntmn]

1. semantic ui is great BUT
2. the package is worst thing i have ever worked with. how in the name of god, i suppose to use it without moving outside node_modules?! .. and what is the point of having config files inside node_modules ?

any workaround ?

[jlukic]

If you are using less only distro theme.config will need to be at node_modules/semantic-ui-less/theme.config

[cmnstmntmn]

@blacksails i switched to SUITCSS. i also reccommend you may also have a look at [spectre toolkit].(https://github.com/picturepan2/spectre).

no offence to the creators, but this is just another bootstrap

[hason]

You can use rewrite-import plugin (with webpack):

var RewriteImportPlugin = require("less-plugin-rewrite-import"),
    options = { plugins: [new RewriteImportPlugin({paths: {
        "../../theme.config": "app/less/theme.config"
    })] };
less.render(css, options)

// app/less/theme.config
@button     : 'amazon';
@themesFolder : '~semantic-ui-less/themes';
@siteFolder  : '../../app/less/semantic-ui';
@import "~semantic-ui-less/theme.less";

[jlukic]

This is why semantic-ui is the better package to use, see Semantic-Org/Semantic-UI#1385 for the protracted discussion.

[jmcclell]

For anyone else having issues with Webpack + Semantic paths, here is what worked for me.

• Install the semantic-ui package (not semantic-css or semantic-less) via NPM in the project with default settings during installation process
• Modify `{project-root}/semantic/src/site/globals/site.variables'

/*******************************
     User Global Variables
*******************************/

@fontPath  : '../../@{theme}/assets/fonts';
@imagePath : '../../@{theme}/assets/images';

• In your Webpack configuration, add semantic/src/themes to the moduleDirectories list

...
   resolve: {
    modulesDirectories: [
      'src',
      'node_modules',
      'semantic/src/themes'
    ],
  },
...

• In your code, just require semantic.less

require('./semantic/src/semantic.less');

I have no idea if this is the best way of accomplishing it, but.. it works. Hope it helps someone.

[psi-4ward]

So my solution so far:

1.) Have a theme.config anywhere in your src folder
2.) Create a valid Symlink in package.json postinstall:

  scripts: {
    "postinstall": "ln -s ../../src/semantic-ui-theme.config node_modules/semantic-ui-less/theme.config"
  }

3.) Have the font-var-overwrite in your theme.config (insert at bottom):

@fontPath : ‘../../../themes/@{site}/assets/fonts’;

[nullbio]

Honestly, I'm surprised to see this is still an issue. It's been open since 2015 (over 3 years now), and seems like an easy fix? Just started a new project and we decided to use semantic-ui-less, and this was the first thing I'm hit by. I imagine every person who uses this is also hit by this error. Are there no plans to fix this? Is this project still active? Am I making a mistake by using this? It's a bit worrying, I must admit.

[jasonszhao]

Thank you so much @jmcclell! I spent this entire afternoon trying to figure this out, and wouldn't have gotten it if it weren't for you.

I had to make a slight change for it to work though:

/*******************************
     User Global Variables
*******************************/

@fontPath  : '../../@{theme}/assets/fonts';
@imagePath : '../../themes/@{theme}/assets/images';

[Briareos]

@cmnstmntmn I use this gulp task as a workaround:

function copyThemeConfig() {
    // Semantic looks for a hardcoded theme.config file, so use this hack.
    return gulp.src('./frontend/semantic/theme.config')
        .pipe(gulp.dest('./node_modules/semantic-ui-less'));
}

and in theme.config i put @siteFolder : '../../frontend/semantic/site'; so I can use all its features.

[AlexKovalevych]

So, did anyone got it really working with a webpack? I stuck where it can't load theme.less from the config file:

ERROR in ./~/css-loader!./~/less-loader!./~/semantic-ui-less/semantic.less
Module build failed: Cannot resolve module 'semantic-ui-less/theme.less' in frontend/semantic
 @ frontend/semantic/theme.config (line 95, column 0)
 near lines:
   @import "~semantic-ui-less/theme";

The file exists in node_modules/semantic-ui-less/theme.less but it can't find it for some reason (using @import "~semantic-ui-less/theme"). Any help is appreciated.

[sormy]

Webpack users, you could find this article helpful (https://www.artembutusov.com/webpack-semantic-ui/)

[ken210]

I've solved this issue making a postinstall script on my repo:

on my package.json:

"scripts": {
  "postinstall": "mv ./node_modules/semantic-ui-less/theme.config.example ./node_modules/semantic-ui-less/theme.config"
}

This way I can just use SUI on it's default theme. You can mv your theme.config from your ropo's root too.

Not ideal, but is better then checking ./semantic or ./node_modules into my repo (ffs).

[jmcclell]

@dfarr I have the same error - double 'themes' in the path. Having a hard time tracking down why this is the case. Did you ever have any luck figuring it out?

[dfarr]

I have the same error. If you look at this path, you can tell it's not right:

../../../../node_modules/semantic-ui-less/themes/themes/default/assets/fonts/icons.svg

Should be:

../../../../node_modules/semantic-ui-less/themes/default/assets/fonts/icons.svg

[Starefossen]

This is why semantic-ui is the better package to use, see Semantic-Org/Semantic-UI#1385 for the protracted discussion.

The semantic-ui is absolutely a horrible package to have in a production environment because of all the package dependencies! I think this should be fixed properly in the less repo.

As a temporarily fix I moved theme.config to my application root directory.

[cmnstmntmn]

can't belive it i lost a full day on this crap

@hason it doesn't work

        // Fix Semantic UI
        new RewriteImportPlugin({
            paths: {
                "./node_modules/semantic-ui-less/theme.config.example": "./resources/assets/app/less/theme.config"
            }
        }),

[rhrn]

helpful for me http://neekey.net/2016/12/09/integrate-react-webpack-with-semantic-ui-and-theming/

[richstandbrook]

Thank you. I'm not going to check node_modules into my repo so how can I make any changes to it? Besides once I include node_modules/semantic-ui-less/semantic.less in my sites own LESS file it can't seem to find node_modules/semantic-ui-less/theme.config even if I rename the distributed version.

[Briareos]

I had to do with a quick&dirty symlink since I'm using gulp 4 (which Semantic-UI also has a problem with). I don't think we should have to include so much stuff in our repo just to not use the bundled Google font.

[cmnstmntmn]

@Briareos

1. i moved site from node_modules in my own src
2. without using any gulp, i hardcoded node_modules/theme.config @siteFolder variable to point to my src

my app.less contain original semantic file and altered theme.config

@import '~semantic-ui-less/semantic';
@import '~semantic-ui-less/theme.config';

still i get this error

    ERROR in ./~/css-loader!./~/postcss-loader!./~/less-loader?sourceMap!./resources/assets/app/less/app.less
    Module build failed: variable @element is undefined
     @ /Users/constantin/Sites/mysite/node_modules/semantic-ui-less/theme.less (line 9, column 8)
     near lines:

       @theme: @@element;

do i miss something?

[hason]

@cmnstmntmn Why don't you use the library mentioned in #6 (comment)?

[hason]

@cmnstmntmn It can only override the paths used in less files. For example, you can override https://github.com/Semantic-Org/Semantic-UI-LESS/blob/master/definitions/views/ad.less#L19

new RewriteImportPlugin({
    paths: {
        "../../theme.config": "./resources/assets/app/less/theme.config"
    }
}),

[cmnstmntmn]

@hason , so far so good, i still have one more issue with fonts

ERROR in ./~/css-loader!./~/postcss-loader!./~/less-loader?sourceMap!./resources/assets/app/less/app.less
    Module not found: Error: Cannot resolve 'file' or 'directory' ../../../../node_modules/semantic-ui-less/themes/themes/default/assets/fonts/icons.svg in /Users/constantin/Sites/mysite/resources/assets/app/less
     @ ./~/css-loader!./~/postcss-loader!./~/less-loader?sourceMap!./resources/assets/app/less/app.less 6:283209-283306

i added the loaders, but i still get errors

{ test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader?limit=10000&mimetype=application/font-woff" },
{ test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "file-loader" },

how did you solved this ?

[viict]

Well, I do it without copying all of those files to my project, without changing things at node_modules/bower_modules folders and in the end I found it to be a good way to manage things as I can override what I need in my project without all the unnecessary semantic-ui structure. I use laravel-elixir (even though I don't use laravel with my project, I enjoy this tool too much to live without it haha)

So I got things like this:

• I have a theme.config file at my project root, in which I changed the @import "theme.less" file to be like @import "assets/less/semantic-ui/theme.less"; which is a less file inside my project structure that is just like a theme.less file there I can change all the themesFolders and stuff to live inside my project and to import things from the semantic-ui core stuff;
• I have a semantic-ui.less inside my project that resides side-by-side to theme.less, this file is used to import specific semantic-ui components, so I don't actually need ALL the components only the ones that are currently being used (this actually is the best thing about this setup, I only import what I need) like:

/* Global */
& { @import "definitions/globals/reset"; }
& { @import "definitions/globals/site"; }

/* Elements */
& { @import "definitions/elements/button"; }
& { @import "definitions/elements/container"; }

And within my gulpfile.js I added things like this:

elixir(function(mix) {
    mix.less('app.less', 'css', {
        paths: [
            __dirname + '/node_modules/semantic-ui', // this is important, without it nothing works
            __dirname + '/node_modules/semantic-ui/src' // this is for easy importing at semantic.less, so I don't have imports like "src/definitions/globals/reset"
        ]
    });

        // copy the assets from default theme (I prefer this over making node_modules publicly available)
    mix.copy('node_modules/semantic-ui/src/themes/default/assets/fonts', 'fonts')
       .copy('node_modules/semantic-ui/src/themes/default/assets/images', 'images');
});

As a test to see if things are working (haha what the funny if we can't test it fast?) I change the theme.less file (in the project structure not the one at semantic-ui please) after the "Site theme site.variables" import, I add:

/* My custom paths */
@imagePath : "../images";
@fontPath  : "../fonts";

And this is all I do, I can easily upgrade my semantic-ui without copying or hardcoding things at semantic-ui folder or node_modules folder, making things easier to keep and the bad thing about this is that we still need this theme.config file which I only need to change ONE line.

[blacksails]

@cmnstmntmn What did you end up with?

I am trying to use the rewrite plugin for less, that part seems to work. But i have an issue where i cannot resolve the imported module inside of theme.config.

[danrashid]

This is a pretty terrible hack, but here it goes. I added a script to package.json in my project root that does this:

lessc --include-path=node_modules/semantic-ui-less src/blah.less src/blah.css

That will cause this module's missing references to ../../theme.config to resolve to my project root, where I added my own theme.config file. This will break if the module's directory structure changes.

[gaui]

Why is this done this way? This is really difficult to deal with, e.g. when you're using bundlers that do not support communicating with LESS API.

Ant Design does this properly and uses a native LESS feature modifyVars

[citricacid-pl]

Maybe this is somehow helpful. I have made semantic-ui-less work with nuxt.js.

https://gist.github.com/citricacid-pl/c1011372618f60c34db704783abcb49d

[em]

Can you guys just do the simple fix and make your requires to theme.config a couple of levels up so it's outside of node_modules?

It's actually not a crazy uncommon pattern for libs to specify a config this way. The main problem is that you're paths are just wrong, and do not allow anyone to write a theme.config while depending on semantic-ui-less through npm. We have to overwrite our node_modules with a hacky postinstall script. Or trick our bundler into aliasing the path.

This problem was incredibly annoying with webpack - but eventually I managed to work around it with a resolves.alias. Now I've switched to Parcel - so I'm reliving this problem again, and the only solution is the aforementioned postinstall symbolic linking.

Why is semantic-ui-less still doing this clearly nonsensical thing after 3 years of people running into it and all independently coming up with the same horribly hacks to work around it?

[shackra]

I experienced this and figured out that after following several guides my resolve.alias values for ../../theme.config and ../semantic-ui/site were wrong due to having a different folder structure than the authors of those articles, so be sure that the path you want to use for your aliases in Webpack 4 are correct.

[cgarrovillo]

I experienced this and figured out that after following several guides my resolve.alias values for ../../theme.config and ../semantic-ui/site were wrong due to having a different folder structure than the authors of those articles, so be sure that the path you want to use for your aliases in Webpack 4 are correct.

How did you figure out your resolve.alias values? I'm confused because I don't even know where I'm coming from when I do a ../../