Copy link to clipboard
Copied
Dear Support Community,
I have recently started using SCSS to generate a CSS file from 3 seperate SCSS files. Dreamweaver compiles these three into one 'master' CSS file. It does this automaticcaly when saving the file, which is the way I like it.
It works, but it's extremely slow! Compiling takes arround 20 to 30 seconds. Way too slow...
I have tried many different things like switching of linting, not using url's inside the SCSS, changing the SCSS Output File Style: nothing helps.
I am running the latest Dreamweaver CC version 21.2 on a PC with very fast specs and on Windows 11.
Please, help me out with some tips how to solve this problem!
Matthijs
Utrecht, the Netherlands
Copy link to clipboard
Copied
so for merging the three files you are using partials, isn't it ?
are your partial scss file using an underscore as first character
when you say that you don't use URL what are you taking about... properties value, or inlcude partials
Copy link to clipboard
Copied
Hi Birnou,
Thank you for responding!
Yes, I use the underscore convention for importing partials. This is how I use it:
My 'master' SCSS file is named styles.scss and has two imports:
@Import "scss-colors-fonts";
@Import "../../cms2/shared_styles/scss-defaults";
So there is a "_scss-colors-fonts.scss" inside the same folder and there is a "_scss-defaults.scss" inside a folder that lives on a different location (hence the ../../). I have set up Dreamweaver so that it creates the compiled CSS file inside the same fodler as styles.scss.
It all works perfectly but just.... extremely slow: Compiling takes 30 seconds, sometimes even 40 or 50 seconds.
To check if the compilation is ready I use the SCSS output tabgroup.
When I said I tried not using URL's I mean using url's inside the css, like "background:url(/_Images/bg-footer.jpg);". I read somewhere that for some Dreamweaver users with the same problem this solved it. But not for me...
Copy link to clipboard
Copied
using URLs in properties values doesn't affect anything in the rendering process... so you can use it
what cause me problem is that rendreding process taking so much time, look like the fiels get some how corrupted , or facing any convert problem.
did you try converting using others tools ?
are you using very large files using modules, and/or mixing in an each loop ?
Copy link to clipboard
Copied
Hi Birnou,
No, I have not tried other tools. Can you recommend one (free)? I would really like to keep using Dreamweaver: I use about six different Adobe CC apps and I really like this eco-system. I also like Dreamweaver: it has become essential for my work as webdeveloper...
And no, I am not using very large files nor modules or mixins.
Attached are the files that cause the problem (saved as .txt because it doesn't allow .scss files here)
As mentioned before: styles.scss is the master; _scss-default.scss and _scss_colors_fonts.scss are imported.
Copy link to clipboard
Copied
Instead of relying on DW to compile your SCSS files, why not just use the standard command line / terminal option? Free and super-fast.
Copy link to clipboard
Copied
@matthijsv80972039 sorry to have been so quiet on the spot, the activity here at the studio is not always compatible with the activities of the forum. 🙂
so before investigating further... have you been able to solve your compilation slowdown, or are you still penalized by untimely slowness?
have you, as @rayek.elfin suggests, used the command line to monitor, then compile, your production flow ?
Copy link to clipboard
Copied
Hi Birnou,
After many hours of trail and error I have found the problem! And I think it maybe a bug in Dreamweaver CC to be quite honest.
It had nothing to do with the imports. The problem was the declaration of a grid template at the beginning of my 'master' scss-file.
Starting from line 21 in my previously attached scss file you can see I make a grid template declaration:
@media screen and (min-width:$break_tablet) {
body {
grid-template:
"header header header header" auto
"banner banner banner banner" auto
"h_cats h_cats h_cats h_cats" auto
"h_crds h_crds h_crds h_crds" auto
"h_tips h_tips h_tips h_tips" auto
"h_text h_text h_text h_text" auto
"...... ...... mainpg ......" 1fr
"...... ...... extras ......" auto
"...... ...... fdback ......" auto
"footer footer footer footer" auto
/ minmax(3vw, 1fr) 240px minmax(0, 960px) minmax(3vw, 1fr);
}
}
Nothing wrong with this right?
But compiling this SCSS file takes between 50 and 60 seconds (!!). Every time...
But now it comes....
When I commented out this line (see below) it took only 2 or 3 seconds...
"h_crds h_crds h_crds h_crds" auto
"h_tips h_tips h_tips h_tips" auto
//"h_text h_text h_text h_text" auto
"...... ...... mainpg ......" 1fr
"...... ...... extras ......" auto
WTF right? 🙂
Turned out that particular line had some extra spaces at the end. Just some extra spaces... Spaces at the end of a line are invissible of course but they can be there. When I removed these spaces at the end of the line compiling was again very fast...
I did another experiment. I gets even more crazy...
This compiled in less than a second (notice NO indentation):
@media screen and (min-width:$break_tablet) {
body {
grid-template:
"header header header header" auto
"banner banner banner banner" auto
"h_cats h_cats h_cats h_cats" auto
"h_crds h_crds h_crds h_crds" auto
"h_tips h_tips h_tips h_tips" auto
"h_text h_text h_text h_text" auto
"...... ...... mainpg ......" 1fr
"...... ...... extras ......" auto
"...... ...... fdback ......" auto
"footer footer footer footer" auto
/ minmax(3vw, 1fr) 240px minmax(0, 960px) minmax(3vw, 1fr);
}
}
But this took 4 minutes and 45 seconds (!) to compile (notice the extra indentation):
@media screen and (min-width:$break_tablet) {
body {
grid-template:
"header header header header" auto
"banner banner banner banner" auto
"h_cats h_cats h_cats h_cats" auto
"h_crds h_crds h_crds h_crds" auto
"h_tips h_tips h_tips h_tips" auto
"h_text h_text h_text h_text" auto
"...... ...... mainpg ......" 1fr
"...... ...... extras ......" auto
"...... ...... fdback ......" auto
"footer footer footer footer" auto
/ minmax(3vw, 1fr) 240px minmax(0, 960px) minmax(3vw, 1fr);
}
}
Meanwhile my Intel Core i7 8700K using all cores and maxing out at 99-100% during these 4 minutes and 45 seconds.
So, there we have it: Dreamweaver does not handle spaces very well if they are inside a grid template declaration.
Please, Dreamweaver development team: do something about this! Because grid templates are here to stay and indentation with tabs or spaces is very normal I would say...