Can't modify style in custom theme using Grunt

Question

I have custom theme Hiddentechies/bentriz

theme.js

bentriz: {
    area: 'frontend',
    name: 'Hiddentechies/bentriz',
    locale: 'ja_JP',
    files: [
      'css/source/custom',
      'css/source/extends',
      'css/source/navigation',
      'css/source/theme'
    ],
    dsl: 'less'
}

I run the following command:

grunt exec:bentriz

grunt less:bentriz

grunt watch

http://devdocs.magento.com/guides/v2.1/frontend-dev-guide/css-guide/css_quick_guide_mode.html

There's an error when I run the grunt exec: and grunt less:

and when I run grunt watch then modify the _custom.less,nothing happened so I can't see the changes in the theme. Where did I go wrong?

Answer 1

Change your code in theme.js file as below:

bentriz: {
        area: 'frontend',
        name: 'Hiddentechies/bentriz',
        locale: 'ja_JP',
        files: [
            'css/styles-m',
            'css/styles-l'
        ],
        dsl: 'less'
 },

And import custom less files in _sources.less file as path below:

app\design\frontend\Hiddentechies\bentriz\web\css\source

@import '_custom.less';

If _sources.less is not exist over above path then copy this file from parent theme or Blank theme and import your custom less files, You do not need to declare this file in theme.js.

Run following command

grunt exec:bentriz    
grunt less:bentriz    
grunt watch