• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Compiling SASS > CSS is very slow

New Here ,
Jan 21, 2022 Jan 21, 2022

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

Views

1.1K

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jan 21, 2022 Jan 21, 2022

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Jan 21, 2022 Jan 21, 2022

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... 


Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jan 21, 2022 Jan 21, 2022

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 ?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Jan 24, 2022 Jan 24, 2022

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Mentor ,
Jan 24, 2022 Jan 24, 2022

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jan 31, 2022 Jan 31, 2022

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 ?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Feb 01, 2022 Feb 01, 2022

Copy link to clipboard

Copied

LATEST

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...

screenshot compiling taskmanager.jpg 



Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines