Install Vue CLI
npm install -g @vue/cli
Create project
vue create my-project
If you didn't add LESS pre-processor during project creation then run this
npm install -D less-loader less
Let's copy some files
mkdir -p assets/styles
cp node_modules/semantic-ui-less/semantic.less assets/styles
cp node_modules/semantic-ui-less/theme.config.example assets/styles/theme.config
Change this:
& { @import "definitions/globals/reset"; }
to
& { @import "~semantic-ui-less/definitions/globals/reset"; }
And do it for all other entries.
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 : '../../src/assets/styles/site';
/*******************************
Import Theme
*******************************/
@import (multiple) "~semantic-ui-less/theme.less";
@fontPath : "../../../themes/@{theme}/assets/fonts";
Add this entry:
const path = require('path')
// Following goes inside module.exports object literal
configureWebpack: {
resolve: {
alias: {
'../../theme.config$': path.join(__dirname, 'src/assets/styles/theme.config'),
},
},
},
In main.js
put line:
import './assets/styles/semantic.less';
There is nice feature helping to resolve paths. As there is @
alias set to resolve src/
folder you can set it in your JetBrains app configuration.
Open Preferences / Languages & Frameworks / Webpack
and as webpack configuration file set following:
[GLOBAL PATH TO YOUR PROJECT]/node_modules/@vue/cli-service/webpack.config.js
or simply click out the path with the built in wizard.
From now your IDE should easily resolve paths like this one: '@/components/Navigation'