cancel
Showing results for 
Search instead for 
Did you mean: 

Beginners help compiling Sass for blank theme

Highlighted
Occasional Contributor

Beginners help compiling Sass for blank theme

I'm new to Sass and I am struggling to install the blank theme. Can anybody tell me how to do step 5 on the blank theme instructions here:

5. Compile SASS files, we recommend using Frontools

I've installed Frontools but am struggling figuring out how to compile and where the command is executed.

  • magento 2.1.4
26 REPLIES
1 x Certified

Re: Beginners help compiling Sass for blank theme

It's not directly relevant to your question, but I'm curious why you are using the Sass theme instead of the build in Less one? 

 

That aside, you need to run `npm install` in the vendor/snowdog/frontools directory. After that is installed, you can symlink the config by running `gulp setup`. You will need to set up theme.json. There is information here: https://github.com/SnowdogApps/magento2-frontools#installation

1 x Certified

Re: Beginners help compiling Sass for blank theme

To be honest I am pretty confused by how to use Frontools as well.

 

I've had some bother previously with it, but now I have got rid of my errors, but that might be because the it doesn't seem to be compiling my styles from the Sass.

 

My styles.scss file is at: app/design/frontend/Mycompany/mysite/web/css/styles.scss

 

My setup in themes.json (dev/tools/frontools/config/themes.json) is:

{
  "blank": {
    "src": "vendor/snowdog/theme-blank-sass",
    "dest": "pub/static/frontend/Snowdog/blank",
    "locale": ["en_US"]
  },
  "upscalemenswear": {
    "src": "../app/design/frontend/Mycompany/mysite",
    "dest": "../pub/static/frontend/Mycompany/mysite",
    "locale": ["en_US"],
    "parent": "blank"
  }
}

I don't exactly know what I should be seeing, but the frontend of my site is completely trashed. I have abandoned the gulpfile.js from inside my theme and was planning on porting all of my Sass processing to postcss inside Frontools, leaving my gulpfile.js only for image & js processing.

 

EDIT: It seems that the CSS of my theme is not being compiled or being placed in pub/static/frontend/Mycompany/mysite/en_US/ - is this supposed to happen?

1 x Certified

Re: Beginners help compiling Sass for blank theme

Paths in your child theme doesn't looks correct or you just trying to make something weird... Let's try to remove "../" from src and dest.

Second thing is "stylesDir" param, you have to set it to "web/css" if you want to use different path than default "styles".

 

So the final config should looks like this:

 

{
  "blank": {
    "src": "vendor/snowdog/theme-blank-sass",
    "dest": "pub/static/frontend/Snowdog/blank",
    "locale": ["en_US"]
  },
  "upscalemenswear": {
    "src": "app/design/frontend/Mycompany/mysite",
    "dest": "pub/static/frontend/Mycompany/mysite",
    "stylesDir": "web/css",
    "locale": ["en_US"],
    "parent": "blank"
  }
}
Occasional Contributor

Re: Beginners help compiling Sass for blank theme

My understanding is that Less based themes are on the way out. I think I'll wait until the base themes have been ported over to Sass.

1 x Certified

Re: Beginners help compiling Sass for blank theme

@Jack Hughes Do not wait for SASS in M2, unless you can handle few years without working store Smiley Happy

1 x Certified

Re: Beginners help compiling Sass for blank theme

I have implemented your amends - thanks for that, but it seems that it has sprung up a bunch of other issues now sadly.

 

Here is a gist of the output from running gulp styles: 
https://gist.github.com/realchriswells/7db6ef071287b2d07601e303dae2fd82

 

1 x Certified

Re: Beginners help compiling Sass for blank theme

Let's remove "var/view_preprocessed/frontools" directory and it should work better.

But at all looks like some of your imports may be broken too.

1 x Certified

Re: Beginners help compiling Sass for blank theme

Ah, one more thing, you shouldn't keep "node_modules" inside you theme directory, b/c Frontools might try to compile files inside them (i.e. test.scss from sass-lint module)

1 x Certified

Re: Beginners help compiling Sass for blank theme

OK, that's probably the problem.

 

Do they need to be added inside frontools then, or just in the root of the Magento install? I have a node_modules folder in the theme currently, which is more than likely trying to be compiled.