Highlighted

Dreamweaver CC 2018 SCSS -> CSS compiler issue

New Here ,
Jan 15, 2018

Copy link to clipboard

Copied

Hi All

I had spent well lot of time on this issue. Could anyone help me sharing the step by step process of setting up the SCSS - CSS compile. I have tried youtube video with no help. TIA

Regards

Hi

Please find below the steps to setup compilation of SCSS file to CSS file, please let us know , if you face any issue after setting the compilation settings.

1) Set the following general CSS preprocessor settings for a site containing SCSS /SAAS/LESS files,  in "Sites > Manage Sites > CSS Preprocessors" dialog box.

General CSS preprocessor settings

2) select the option "Enable Auto Compilation on File Save"

Select this check box to enable auto compilation of CSS preprocessors

3) Set "CSS source and output Preferences"

Specify the location of the CSS output file that is generated.

"In the same folder as source"- Select this option if you want the generated CSS files to be saved in the same folder as the source Sass/SCSS and LESS files.

"Define output folder" - Select this option and specify a folder where you want to save the generated CSS files.

4) create your SCSS file and save it in the site, or open any SCSS file save it in site ,you can compile manually by right click on it and clcik on "compile". It will compile to CSS file in the outout folder set by you in settings.

5) open Output panel (Window > Results > Output). The status icon in the status bar is displayed in green when the file is compiled to CSS. To open the compiled CSS, double-click the success message in the panel.

For detailed steps please refer to below link Using CSS preprocessors in Dreamweaver  

Thanks

Views

3.9K

Likes

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

Dreamweaver CC 2018 SCSS -> CSS compiler issue

New Here ,
Jan 15, 2018

Copy link to clipboard

Copied

Hi All

I had spent well lot of time on this issue. Could anyone help me sharing the step by step process of setting up the SCSS - CSS compile. I have tried youtube video with no help. TIA

Regards

Hi

Please find below the steps to setup compilation of SCSS file to CSS file, please let us know , if you face any issue after setting the compilation settings.

1) Set the following general CSS preprocessor settings for a site containing SCSS /SAAS/LESS files,  in "Sites > Manage Sites > CSS Preprocessors" dialog box.

General CSS preprocessor settings

2) select the option "Enable Auto Compilation on File Save"

Select this check box to enable auto compilation of CSS preprocessors

3) Set "CSS source and output Preferences"

Specify the location of the CSS output file that is generated.

"In the same folder as source"- Select this option if you want the generated CSS files to be saved in the same folder as the source Sass/SCSS and LESS files.

"Define output folder" - Select this option and specify a folder where you want to save the generated CSS files.

4) create your SCSS file and save it in the site, or open any SCSS file save it in site ,you can compile manually by right click on it and clcik on "compile". It will compile to CSS file in the outout folder set by you in settings.

5) open Output panel (Window > Results > Output). The status icon in the status bar is displayed in green when the file is compiled to CSS. To open the compiled CSS, double-click the success message in the panel.

For detailed steps please refer to below link Using CSS preprocessors in Dreamweaver  

Thanks

Views

3.9K

Likes

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
Adobe Employee ,
Jan 15, 2018

Copy link to clipboard

Copied

Hi

Please find below the steps to setup compilation of SCSS file to CSS file, please let us know , if you face any issue after setting the compilation settings.

1) Set the following general CSS preprocessor settings for a site containing SCSS /SAAS/LESS files,  in "Sites > Manage Sites > CSS Preprocessors" dialog box.

General CSS preprocessor settings

2) select the option "Enable Auto Compilation on File Save"

Select this check box to enable auto compilation of CSS preprocessors

3) Set "CSS source and output Preferences"

Specify the location of the CSS output file that is generated.

"In the same folder as source"- Select this option if you want the generated CSS files to be saved in the same folder as the source Sass/SCSS and LESS files.

"Define output folder" - Select this option and specify a folder where you want to save the generated CSS files.

4) create your SCSS file and save it in the site, or open any SCSS file save it in site ,you can compile manually by right click on it and clcik on "compile". It will compile to CSS file in the outout folder set by you in settings.

5) open Output panel (Window > Results > Output). The status icon in the status bar is displayed in green when the file is compiled to CSS. To open the compiled CSS, double-click the success message in the panel.

For detailed steps please refer to below link Using CSS preprocessors in Dreamweaver  

Thanks

Likes

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
Reply
Loading...
New Here ,
Feb 17, 2018

Copy link to clipboard

Copied

Hello, I have the same issue and this solution does not work for me. I've done all 5 steps but when I right-click on the scss-file and click on compile nothing happens, nothing appears in the output panel and no new css-document is created. Any ideas?

I've read and reread the content of the detailed steps link several times but I didn't see anything that helped me troubleshoot this problem. Help would be appreciated.

Naomi

Likes

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
Reply
Loading...
Adobe Community Professional ,
Feb 17, 2018

Copy link to clipboard

Copied

Have you tried the link in step 5?

If so and you still do not get the correct result, please start a new discussion.


Ben

Likes

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
Reply
Loading...
New Here ,
Feb 20, 2018

Copy link to clipboard

Copied

Hello BenPleysier, thank you for your response. I did do step 5 and I did not get the correct result but I found someone else on these forums who had the same problem and the solution is to restart dreamweaver whenever that happens and then it starts working again.
Thank you for your time!

Naomi

Likes

3 Likes

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
Reply
Loading...
Adobe Community Professional ,
Feb 20, 2018

Copy link to clipboard

Copied

Crazy solution, but if it helps. Thanks for the feedback.


Ben

Likes

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
Reply
Loading...
New Here ,
Mar 11, 2018

Copy link to clipboard

Copied

this solution worked for me.

Likes

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
Reply
Loading...
New Here ,
Mar 29, 2018

Copy link to clipboard

Copied

This is the only way for me to fix this issue too..

Windows 10

Likes

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
Reply
Loading...
New Here ,
Apr 10, 2020

Copy link to clipboard

Copied

I tried this also and worked. But then I also changed another setting and the Documentation page reminded me to

Edit > Sync Settings > Sync Settings Now

Perhaps this is what happens when restarting the entire program. Try manually synching settings.

Likes

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