Using Snowdog/blank as a child theme without Frontools

[realchriswells]

I have just started a new project that was going to use your Blank Sass theme as a starting point as I had such an easy time with it on the last project I did, however it seems that you have removed the gulpfile.js from the Blank theme.

I assumed this was to get people using Frontools? I've tried doing it this way, however with no luck at all.

I have run the gulp setup and changed the themes.json file in dev/tools/frontools/config/themes.json to be:

{
  "blank": {
    "src": "vendor/snowdog/theme-blank-sass",
    "dest": "pub/static/frontend/Snowdog/blank",
    "locale": ["en_US"]
  }
}

However this doesn't seem to work when using a child theme as none of the default stylings are being pulled across in to my child theme.

The reason for my not setting up my child theme in the themes.json file is that I have my own gulpfile.js and when I do include my theme in the themes.json it breaks when looking at my bower_components folder - the contents of which are out of my control.

If you could let me know how to actually get going on this that would be great, as I'm having a fair few issues with getting started with Blank theme now.

[Bartek Igielski]

gulpfile.js in theme isn't designed to compile styles for Magento, it's just for sake of CI test. All of this code was moved a while ago to .test directory.

If you will not define a child theme in your themes.json how should Frontools know to compile this child theme? It's not an AI, just a dumb set of tools based on config files

I think if you will add bower_components to ignored list like a node_modules, everything should work fine. Could you test it and make a pull request on Github?

[realchriswells]

Hi Bartek,

Thanks for getting back to me.

I can do this, however I'm not sure where the ignored list is. I tried this:

theme.locale.forEach(locale => {
      const src=config.projectPath + theme.src,
            dest      = config.projectPath + theme.dest + '/' + locale,
            srcPaths  = plugins.globby.sync(src + '/**/web/**', { nodir: true, ignore: ['/**/node_modules/**','/**/bower_components/**'] });

      if (theme.parent) {
        const parentTheme     = config.themes[theme.parent],
              parentsrc=config.projectPath + parentTheme.src,
              parentSrcPaths  = plugins.globby.sync(parentSrc + '/**/web/**', { nodir: true, ignore: ['/**/node_modules/**','/**/bower_components/**'] });

But that didn't seem to work - if you can point me in the direction I will happily do the pull request and get the change made if it works.

[Bartek Igielski]

Let's try here:

https://github.com/SnowdogApps/magento2-frontools/blob/master/helper/inheritance-resolver.js after every node_modules, so after lines 38, 50, 68, 81 and 92.

And also in https://github.com/SnowdogApps/magento2-frontools/blob/5041f5b6d302448f77c822b984bfa23193371120/task... after every node_modules.

[realchriswells]

Hi Bartek,

That fix you proposed worked initially, however now that I've started building my theme using parts of Susy which are located in the bower_components folder (now ignored), frontools will not recompile, giving me the following error again:

[09:03:14] gulp-notify: [Error running Gulp] Error: ../../../var/view_preprocessed/frontools/frontend/Vendor/theme/web/css/layout/_grid.scss
Error: File to import not found or unreadable: ../../bower_components/susy/sass/susy.
       Parent style sheet: /Applications/MAMP/htdocs/Project/var/view_preprocessed/frontools/frontend/Vendor/theme/web/css/layout/_grid.scss
        on line 2 of ../../../var/view_preprocessed/frontools/frontend/Vendor/theme/web/css/layout/_grid.scss
>> @import "../../bower_components/susy/sass/susy";
   ^

Do you have any ideas why this might be?

[Bartek Igielski]

I though my previous answer was just dumb If all Bower files are just ignored, there is no way to compile styles using them.

I have to take some time and reproduce this issue locally. Can I ask you to create a public Github repository with a simple theme which uses some Bower components? (it may be just copy-paste of your current child theme)

[realchriswells]

Hi Bartek,

Sorry for the delayed reply - been crazy busy!

Here is the template you wanted with the bower_components dependancy: https://github.com/PinpointDesigns/GulpBoilerplate

Hope you find a solution to this soon so I can start using frontools as they are meant to be used.

Just as a thought - is the error a problem with how the bower_components are being @imported within the theme? If so, maybe (and this is completely hypothetical) adding a reference to the root of the theme, the src definition in the child-theme reference to any calls to bower_components when frontools is building the styles might fix the issue? 

[realchriswells]

Hi Bartek,

Removed my last post, thought this might be more helpful.

I have done away with bower in my theme to see if that made a difference, however I am still getting errors as it looks like Frontools does not like @import, even in node_modules.

My theme when compiled with gulp in my own workflow gets through with no errors, however when I try to use Frontools (minus bower_components) it complains:

gulp-notify: [Error running Gulp] Error: ../../../var/view_preprocessed/frontools/frontend/Vendor/template/web/css/layout/_grid.scss
Error: File to import not found or unreadable: breakpoint.
       Parent style sheet: /Applications/MAMP/htdocs/UpscaleMenswear/var/view_preprocessed/frontools/frontend/Vendor/template/web/css/layout/_grid.scss
        on line 1 of ../../../var/view_preprocessed/frontools/frontend/Vendor/template/web/css/layout/_grid.scss
>> @import "breakpoint";
   ^

This seems to be similar to the issue previously, but with node_modules. 

I'm not sure if this is helping, or causing more headaches for you I'm afraid...

[Bartek Igielski]

Just give me some time, I'm really busy with our internals, but for sure I'll back to you with questions, if they appear.

[Bartek Igielski]

Looks like in version 1.3.0 files are handled properly, but... packages contains files that shouldn't be taken to compilation i.e. "/susy/templates/project/style.scss" or "/sassy-maps/examples/example.scss", b/c are trying to import not existing files.

AFAIK there is no way to define in bower config which files to ignore during installation, so we have to somehow handle this on Frontools level.

There is also open github issuse for that feature.