Can't find theme.config #6

richstandbrook · 2015-07-09T15:27:16Z

So I've set semantic-ui-less as an npm dependancy for my project, I then include @import "semantic-ui-less/semantic.less"; in my project less file and add the theme.config file next to it.

Run my project gulp file to compile the less and it complains:

Error: '../../theme.config' wasn't found. Tried - node_modules/semantic-ui-less/theme.config,../theme.config,../../theme.config in file node_modules/semantic-ui-less/definitions/modules/transition.less line no. 20

Can I not simply include semantic ui as a dependancy rather than having to commit the entire thing?

Confused!

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

jlukic · 2015-07-13T03:58:55Z

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

richstandbrook · 2015-07-13T08:42:01Z

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.

jlukic · 2015-07-13T13:38:01Z

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

hason · 2015-08-07T10:22:21Z

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";

Starefossen · 2015-09-29T18:07:04Z

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.

Briareos · 2015-11-09T00:36:31Z

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.

AlexKovalevych · 2016-02-25T20:46:32Z

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.

cmnstmntmn · 2016-04-05T15:25:40Z

semantic ui is great BUT
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 ?

Briareos · 2016-04-05T15:38:41Z

@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.

cmnstmntmn · 2016-04-05T20:38:29Z

@Briareos

i moved site from node_modules in my own src
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 · 2016-04-05T21:20:59Z

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

cmnstmntmn · 2016-04-05T21:50:29Z

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"
            }
        }),

hason · 2016-04-05T22:02:57Z

@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 · 2016-04-06T09:13:53Z

@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 ?

dfarr · 2016-04-20T02:05:17Z

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

ken210 · 2016-04-28T21:56:34Z

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 · 2016-06-03T22:45:25Z

@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?

jmcclell · 2016-06-04T12:46:25Z

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.

viict · 2016-06-04T18:51:50Z

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.

jasonszhao · 2016-06-07T00:55:39Z

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';

blacksails · 2016-06-28T13:45:47Z

@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.

cmnstmntmn · 2016-06-28T14:16:18Z

@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

sormy · 2016-09-15T04:37:30Z

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

psi-4ward · 2016-10-02T10:46:03Z

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’;

danrashid · 2017-05-10T18:06:30Z

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.

rhrn · 2018-01-29T07:23:46Z

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

gaui · 2018-07-31T21:55:06Z

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 · 2018-08-24T08:07:27Z

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

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

nullbio · 2018-10-23T13:26:02Z

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.

em · 2019-02-17T08:43:45Z

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 · 2020-01-18T17:35:11Z

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 · 2020-10-18T02:15:24Z

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 ../../

nullbio mentioned this issue Oct 23, 2018

Grouped Segments should use Group Segment Variables #49

Open

keyvanm mentioned this issue May 14, 2019

Can't resolve '../../theme.config' #65

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Can't find theme.config #6

Can't find theme.config #6

richstandbrook commented Jul 9, 2015

jlukic commented Jul 13, 2015

richstandbrook commented Jul 13, 2015

jlukic commented Jul 13, 2015

hason commented Aug 7, 2015

Starefossen commented Sep 29, 2015

Briareos commented Nov 9, 2015

AlexKovalevych commented Feb 25, 2016

cmnstmntmn commented Apr 5, 2016

Briareos commented Apr 5, 2016

cmnstmntmn commented Apr 5, 2016

hason commented Apr 5, 2016

cmnstmntmn commented Apr 5, 2016

hason commented Apr 5, 2016

cmnstmntmn commented Apr 6, 2016

dfarr commented Apr 20, 2016

ken210 commented Apr 28, 2016

jmcclell commented Jun 3, 2016

jmcclell commented Jun 4, 2016 •

edited

Loading

viict commented Jun 4, 2016 •

edited

Loading

jasonszhao commented Jun 7, 2016

blacksails commented Jun 28, 2016

cmnstmntmn commented Jun 28, 2016

sormy commented Sep 15, 2016

psi-4ward commented Oct 2, 2016

danrashid commented May 10, 2017

rhrn commented Jan 29, 2018

gaui commented Jul 31, 2018 •

edited

Loading

citricacid-pl commented Aug 24, 2018

nullbio commented Oct 23, 2018

em commented Feb 17, 2019 •

edited

Loading

shackra commented Jan 18, 2020

cgarrovillo commented Oct 18, 2020

Can't find theme.config #6

Can't find theme.config #6

Comments

richstandbrook commented Jul 9, 2015

jlukic commented Jul 13, 2015

richstandbrook commented Jul 13, 2015

jlukic commented Jul 13, 2015

hason commented Aug 7, 2015

Starefossen commented Sep 29, 2015

Briareos commented Nov 9, 2015

AlexKovalevych commented Feb 25, 2016

cmnstmntmn commented Apr 5, 2016

Briareos commented Apr 5, 2016

cmnstmntmn commented Apr 5, 2016

hason commented Apr 5, 2016

cmnstmntmn commented Apr 5, 2016

hason commented Apr 5, 2016

cmnstmntmn commented Apr 6, 2016

dfarr commented Apr 20, 2016

ken210 commented Apr 28, 2016

jmcclell commented Jun 3, 2016

jmcclell commented Jun 4, 2016 • edited Loading

viict commented Jun 4, 2016 • edited Loading

jasonszhao commented Jun 7, 2016

blacksails commented Jun 28, 2016

cmnstmntmn commented Jun 28, 2016

sormy commented Sep 15, 2016

psi-4ward commented Oct 2, 2016

danrashid commented May 10, 2017

rhrn commented Jan 29, 2018

gaui commented Jul 31, 2018 • edited Loading

citricacid-pl commented Aug 24, 2018

nullbio commented Oct 23, 2018

em commented Feb 17, 2019 • edited Loading

shackra commented Jan 18, 2020

cgarrovillo commented Oct 18, 2020

jmcclell commented Jun 4, 2016 •

edited

Loading

viict commented Jun 4, 2016 •

edited

Loading

gaui commented Jul 31, 2018 •

edited

Loading

em commented Feb 17, 2019 •

edited

Loading