_extends.scss not compiling

[websiteni]

Hi, I'm not sure if this is a problem or if it's my dodgey code (most likely the later), but I'm having an issue with a new installation of your blank theme and frontools. I have used it before and it works great! I don't think I could build another magento site without using it!
However, for some reason on my latest project I am having issues with my changes not being recognised when running the command "npm run watch". I'm using a child theme and all appears to be working fine, but when I make a change to my _extends.scss code the watch appears to recompile but the changes don't take affect on my browser. It is only until I upload the file styles.scss that the changes actually appear on my browser.

My file structure is as follows: app/design/frontend/Childtheme/blank/styles/_extends.scss app/design/frontend/Childtheme/blank/styles/styles.scss

_extends.scss is called from styles.scss as an import _extends.scss is where I do majority of my custom code... styles.scss never changes as it's just made up of a list of @imports

Am I doing something wrong, or have I missed a step in the setup process?

[Igloczek]

When you are compiling it using npm run styles everything is alright?

Could you show me the console output of running watch task after making some changes in _extends.scss?

[websiteni]

Hi, even when I use npm run styles the changes don't take effect. Below is the output when running watch task after making changes to _extends.scss...

[09:35:15] Change detected. Theme: childtheme-blank File: styles/_extends.scss
[09:35:15] Theme: childtheme-blank File: _extends.scss - SASS Lint finished.
[09:35:17] Theme: childtheme-blank styles.css.map Compiled!
[09:35:17] Theme: childtheme-blank styles.css Compiled!

styles/helper/_effects.scss
74:12   ⚠  Unexpected unit (length-zero-no-unit) [stylelint]
74:12   ⚠  Expected "#0A0A0A" to be "#0a0a0a" (color-hex-case) [stylelint]
81:12   ⚠  Unexpected unit (length-zero-no-unit) [stylelint]
81:12   ⚠  Unexpected unit (length-zero-no-unit) [stylelint]
81:12   ⚠  Unexpected unit (length-zero-no-unit) [stylelint]
81:12   ⚠  Unexpected unit (length-zero-no-unit) [stylelint]
88:12   ⚠  Unexpected unit (length-zero-no-unit) [stylelint]
88:12   ⚠  Unexpected unit (length-zero-no-unit) [stylelint]
88:12   ⚠  Unexpected unit (length-zero-no-unit) [stylelint]
88:12   ⚠  Unexpected unit (length-zero-no-unit) [stylelint]
88:12   ⚠  Unexpected unit (length-zero-no-unit) [stylelint]
88:12   ⚠  Unexpected unit (length-zero-no-unit) [stylelint]

styles/vendor/slick/_slick-theme.scss
69:4    ⚠  Unexpected unit (length-zero-no-unit) [stylelint]
70:4    ⚠  Unexpected unit (length-zero-no-unit) [stylelint]
161:12  ⚠  Unexpected unit (length-zero-no-unit) [stylelint]
162:12  ⚠  Unexpected unit (length-zero-no-unit) [stylelint]

[09:35:19] Theme: childtheme-blank File: styles.css - CSS Lint finished.

[Igloczek]

Are you sure that you have a correct theme enabled in Magento?

It doesn't look like a tooling problem, especially not related to the watcher, while even when you compile them via styles task the changes are still not visible.

[websiteni]

You're correct, if I compile via styles the changes are not recognised, but as soon as I upload styles.scss file (with watch running) the changes i made on _extends.scss become visible on the browser. Below are the steps:

1. run command: npm run watch
2. make change to _extends.scss and upload
3. watcher recognises file change and appears to compile the changes, but they are not visible on browser
4. I upload styles.scss (without making any changes to it). Watcher recognises a file change and compiles the changes. The browser now shows the change I made on _extends.scss

Another weird thing I noticed... when I upload just _extends.scss and refresh the browser and then inspect element to see the css, I don't see any changes on my class. However, if I click on the_extends.scss filename (in chrome's inspect element) I can see the whole file and my changes are visible there. Would this be a caching issue on the server perhaps?

[Igloczek]

What you mean by "upload"? You are working directly on the production server via some FTP and the tools are also there?

[websiteni]

yes, that's correct

[Igloczek]

Oh man, stop doing it, really, it's not that hard to set up a local environment to develop here and then push only compiled, production ready, code to the server.

But the main issue seems to be related to browser cache, you should open "Network" tab in devtools and enable "Disable cache", it should help.

[websiteni]

Thanks for the advise, really appreciate it!