i cant set up grunt due an error

Question

i want to create luma based theme and set up grunt for it. path to .less files: frontend///web/css/source/style-l.less im getting an error: unable to resolve the source file for 'frontend/<vendor>/<name>/en_US/css/source\styles-l.less

local-themes.js below

module.exports = {
blank: {
    area: 'frontend',
    name: 'Magento/blank',
    locale: 'en_US',
    files: [
        'css/styles-m',
        'css/styles-l',
        'css/email',
        'css/email-inline'
    ],
    dsl: 'less'
},
luma: {
    area: 'frontend',
    name: 'Magento/luma',
    locale: 'en_US',
    files: [
        'css/styles-m',
        'css/styles-l'
    ],
    dsl: 'less'
},
backend: {
    area: 'adminhtml',
    name: 'Magento/backend',
    locale: 'en_US',
    files: [
        'css/styles-old',
        'css/styles'
    ],
    dsl: 'less'
},
boo: {
    area: 'frontend',
    name: 'sebu/boo',
    locale: 'en_US',
    files: [
        'css/source/styles-l'
    ],
    dsl: 'less'
}};

Answer 1

Less Compilation with Grunt:

Note : Before starting the installation, Please rename the existing files package.json.sample and Gruntfile.js.sample in your root folder as package.json and Gruntfile.js respectively

1. Install Node.js

   sudo apt install nodejs

   Check installed with version using
   node -v

2. Install Grunt tool Globally

   npm install -g grunt-cli

3. Now we have to install the node.js in the magento root directory for the specific project that we are going to work with Grunt.

To do this, run the following commands in a command prompt:

cd <your_Magento_instance_directory>

npm install

npm update

Download V4U-Samplelesstheme

4. Add your theme to Grunt configuration. To do this, in the

dev/tools/grunt/configs/themes.js

file, add your theme to module.exports like following:

,
Samplelesstheme: {
area: 'frontend',
name: 'V4U/Samplelesstheme',
locale: 'en_US',
files: [
'css/source/_extend',
'css/styles-m',
'css/styles-l'
],
dsl: 'less'
}

Note: Here theme name is Samplelesstheme & vendor name is V4U.

Now the installation process is completed, the next step is to run the Grunt commands.

Grunt Commands:

1. grunt clean: -Removes the theme related static files in the pub/static and var directories.

Example: grunt clean:Samplelesstheme

2. grunt exec: -Republishes symlinks to the source files to the pub/static/frontend/// directory.

Example: grunt exec:Samplelesstheme

3. grunt watch: -Tracks the changes in the source files, recompiles .css files, and reloads the page in the browser pages (you need to have LiveReload installed for you browser)

Example: grunt watch

Important Notes:

You can directly use your less in _extend.less by importing. (app/design/frontend/V4U/Samplelesstheme/web/css/source/_extend.less) because It is already defined in 'dev/tools/grunt/configs/less.js' line no 48 like

module.exports = _.extend(themeOptions, lessOptions);

If you find any error like

Fatal error: Port 35729 is already in use by another process.

Then close the terminal and again run the command

grunt watch