How to make fomantic-ui-less work with Nuxt.js

Fomantic-ui-less nuxtjs configuration.md

Installation

First of all we need to install Nuxt.js

vue init nuxt-community/starter-template <project-name>

Then we have to follow instructions. Finally we need to install some additional packages:

npm install --save-dev less less-loader fomantic-ui-less

Configuration

Let's copy some files

cp node_modules/fomantic-ui-less/semantic.less assets/styles -p
cp node_modules/fomantic-ui-less/theme.config.example assets/styles/theme.config

assets/styles/semantic.less

Change this:

& { @import "definitions/globals/reset"; }

to

& { @import "~fomantic-ui-less/definitions/globals/reset"; }

And do it for all other entries.

assets/styles/theme.config

In the end of the file replace Folders and Import theme sections with this:

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

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

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


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

@import (multiple) "~fomantic-ui-less/theme.less";
@fontPath : "../../../themes/@{theme}/assets/fonts";

nuxt.config.js

Add this entry:

css: [
  '~/assets/styles/semantic.less'
],

To make the semantic ui to properly resolve paths add this to the end of extend function:

config.resolve.alias['../../theme.config$'] = '~/assets/styles/theme.config'