Using grunt:watch seems to not working with _custom.less

[gkopec]

Hi,
I have a quick question about custom CSS.
I have my file in app/design/frontend/Local/breeze-custom/web/css/_custom.less I am testing such scenario:

& when (@critical) {
    .page-title {
        color: blue;
    }
}

& when not (@critical) {
    .page-title {
        color: red;
    }
}

Unfortunately grunt watch:breeze-custom is not changing .../default.css. I need to run grunt clean or grunt exec to apply my changes. The watch function is processing _custom.less but it doesn't seem to go further with the main files (default.css)
Here is my settings in local-themes.js

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'
    },
    'breeze-blank': {
        area: 'frontend',
        name: 'Swissup/breeze-blank',
        locale: 'en_US',
        files: [
            'css/default',
            'css/checkout',
            'css/deferred-default',
            'css/deferred-checkout',
            'css/email',
            'css/email-inline'
        ],
        dsl: 'less'
    },
    'breeze-evolution': {
        area: 'frontend',
        name: 'Swissup/breeze-evolution',
        locale: 'en_US',
        files: [
            'css/default',
            'css/checkout',
            'css/deferred-default',
            'css/deferred-checkout',
            'css/email',
            'css/email-inline'
        ],
        dsl: 'less'
    },
    'breeze-custom': {
        area: 'frontend',
        name: 'Local/breeze-custom',
        locale: 'en_US',
        files: [
            'css/default',
            'css/checkout',
            'css/deferred-default',
            'css/deferred-checkout',
            'css/email',
            'css/email-inline'
        ],
        dsl: 'less'
    }
};

I think I miss something but I am not sure what exactly ;) The Magento is in developer mode.

[vovayatsyuk]

Sorry, I don't know how to help you. I just tried it locally, and it's working fine:

1. Create a theme and activate it.

2. Create app/design/frontend/Local/evo/web/css/_custom.less

3. Add new entry to local-themes.js

   'local-evo': {
       area: 'frontend',
       name: 'Local/evo',
       locale: 'en_US',
       files: [
           'css/default',
           'css/checkout',
           'css/deferred-default',
           'css/deferred-checkout',
           'css/email',
           'css/email-inline'
       ],
       dsl: 'less'
   },
   

4. Run grunt clean:local-evo && grunt exec:local-evo && grunt less:local-evo && grunt watch:local-evo

5. Change app/design/frontend/Local/evo/web/css/_custom.less

6. Refresh the page with disabled cache in the network panel.

[gkopec]

Thank you @vovayatsyuk. I think "disabled cache" was the case.
It is working like a charm.
Sorry for wasting your time ;(

[vovayatsyuk]

Great! Not a problem at all.

[gkopec]

@vovayatsyuk shouldn't watch observe also _extend-checkout.less without any changes in local-theme.js?

#src/app/design/frontend/Local/breeze-custom/web/css/_extend-checkout.less

@import (reference) 'extend/abstracts/_variables.less';
@import 'extend/module/_firecheckout.less';

[gkopec]

@vovayatsyuk it's started working! Changes from _extend-checkout.less are now firing watch function.
As you can see I am working with FireCheckout and I am wondering if I can simply override it's variables, for example @fc-button__background?

[vovayatsyuk]

Firecheckout uses it's own styles, so you cannot change its variables from luma or breeze default styles (they are not visible on theme level).

Instead you need to create [your_theme]/Swissup_Firecheckout/web/css/custom/_main.less. See: http://docs.swissuplabs.com/m2/extensions/firecheckout/customization/custom-css/