LESS Compilation

Within StoreFrame Framework, we still use the default Magento 2 LESS compilation. We believe that by keep using LESS compilation (although slow) this complies and compile complex LESS file dependencies pretty good. Therefore we have made only small adjustment to add extra layer of dependency to it.

StoreFrame Framework theme-base override the LESS file located here (override from blank theme)

vendor/storeframe/theme-base/web/css/source/*.less

It’s recommended not to touch or override these less files within this directory as it will break your webshop theme or LESS file compilation.

An example of what we have added to the file (for reference)

vendor/storeframe/theme-base/web/css/source/styles-m.less

@import (reference) 'source/_base_extends.less';

//@magento_import 'source/_base.less'; // Base Theme blocks

@import 'source/_base_theme.less';

@import 'source/_base_extend.less';

Child Theme, grunt-config.json

For every StoreFrame Framework we have delivered, we make sure that a child theme is also installed within your Magento app directory. This enables you as a developer to create override and or to extend Magento 2 project. Therefore we have also made adjustment to the grunt-config.json of Magento 2 to compile the child theme.

{
    "themes": "app/design/frontend/Storeframe/child/themes.js"
}

Within this file themes.js we have added base, child and admintheme LESS configuration. Therefore you can start using

To compile child theme

grunt exec:child
grunt less:child

To compile base theme

grunt exec:base
grunt less:base

To compile admintheme

grunt exec:admintheme
grunt less:admintheme

LESS Compilation Breaks During Static Content Deploy

We have noticed that some developer would create a new modules and for some reason break during static content deploy LESS compilation. Most of this cases appear due to using a variable defined within the child or base theme and not re-declaring the variable within the module it’s self. Hence it’s important to always add or make dummy variable declaration within each custom modules LESS files.