Semantic-Org/Semantic-UI-LESS

Failed to compile with existing Vue Project

domvo opened this issue · 1 comments

domvo commented

I have a VueJS App and I want to integrate Semantic UI. I installed the package and necessary loaders. I keep getting an error when trying to compile:

These relative modules were not found:

* ./themes/themes/default/assets/fonts/brand-icons.eot in ./node_modules/css-loader??ref--10-oneOf-2-1!./node_modules/postcss-loader/lib??ref--10-oneOf-2-2!./node_modules/less-loader/dist/cjs.js??ref--10-oneOf-2-3!./node_modules/semantic-ui-less/semantic.less

In my theme.config I have the following lines

/*******************************
            Folders
*******************************/

/* Path to theme packages */
@themesFolder : "themes";

/* Path to site override folder */
@siteFolder  : 'site';


/*******************************
         Import Theme
*******************************/

@import "node_modules/semantic-ui-less/theme.less";

/* End Config */

The ./themes/themes[...] is very suspisious, of course that folder structure doesn't exist.

Any suggestions? Thanks!

thomasdarvik commented

I have the same problem with my project using React, and Web Compiler for Visual Studio 2017.
The "fix" for me is to change a variable path inside the themes folder. It seems to be a problem with relative paths. Inside your Semantic UI Less folder with the source (in your case, it it seems to be in node_modules, since you're using NPM, you need to change the fontPath and imagePath inside each theme.

Example: Inside themes/default/globals/site.variables , find @imagePath and @fontPath.
Change the values to:
@imagePath : '../../themes/default/assets/images';
@fontPath : '../../default/assets/fonts';

That worked for me. I am not sure if this is a problem with my LESS-loader, or Semantic UI Less.
Maybe some of the authors can explain better what the problem is.

  • 👎1
  • ❤️1