Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save citricacid-pl/c1011372618f60c34db704783abcb49d to your computer and use it in GitHub Desktop.
Save citricacid-pl/c1011372618f60c34db704783abcb49d to your computer and use it in GitHub Desktop.
How to make semantic-ui-less work with Nuxt.js

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:

yarn add --dev less less-loader semantic-ui-less

Configuration

Let's copy some files

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

assets/styles/semantic.less

Change this:

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

to

& { @import "~semantic-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) "~semantic-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'
@citricacid-pl
Copy link
Author

And it works:

image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment