Beginners help compiling Sass for blank theme

[Jack Hughes]

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.

[bassplayer7]

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

[realchriswells]

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?

[Bartek Igielski]

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"
  }
}

[Jack Hughes]

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.

[Bartek Igielski]

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

[realchriswells]

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

[Bartek Igielski]

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.

[Bartek Igielski]

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)

[realchriswells]

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.