Compile .scss to css using Scout-App

Post Reply
LCT
Posts: 9
Joined: 05 Sep 2017, 11:48

22 Jun 2018, 14:18

Dear support,
I try to use Verona layout and theme I bought and as the documentation said, I need first to compile SASS to CSS. To do that I found Scout-App http://scout-app.io/ but when I put sass files directory as input and my css directory as output I got the message This project's input folder contains no Sass files that can be processed.
Image
Please help.

User avatar
aragorn
Posts: 3610
Joined: 29 Jun 2013, 12:38

26 Jun 2018, 11:06

Please use this command; sass -w src/main/webapp/resources/ --sourcemap=none

You need to install SASS to your PC to use the above command or you can use maven sass compile plugin to provide css from SASS files.

LCT
Posts: 9
Joined: 05 Sep 2017, 11:48

26 Jun 2018, 16:25

Hello,
I did as suggested. I have installed sass and execute suggested command line. But not succeed.
Can you please provide sample?

User avatar
aragorn
Posts: 3610
Joined: 29 Jun 2013, 12:38

28 Jun 2018, 10:52

Did you try our sample project? To run our sample;
- sass -w src/main/webapp/resources/ --sourcemap=none
- mvn jetty:run

Also, do you get an error on console?

LCT
Posts: 9
Joined: 05 Sep 2017, 11:48

03 Jul 2018, 17:44

for example when I try a single file I got below error:

Error: Undefined variable: "$infoMessageBgColor".
on line 4 of stdin
>> background-color: $infoMessageBgColor;
------------------------------^

LCT
Posts: 9
Joined: 05 Sep 2017, 11:48

03 Jul 2018, 17:54

for example when I try to compile this sass content it is not working.

body {
.ui-messages {
.ui-messages-info {
background-color: $infoMessageBgColor;
border-color: $infoMessageBgColor;
color: $infoMessageTextColor;

.ui-messages-info-icon {
@include icon_override("\f05a");
font-size: 24px;
margin-top: -4px;
}

.ui-messages-close {
color: $infoMessageTextColor;
}
}

.ui-messages-warn {
background-color: $warnMessageBgColor;
border-color: $warnMessageBgColor;
color: $warnMessageTextColor;

.ui-messages-warn-icon {
@include icon_override("\f071");
font-size: 24px;
margin-top: -4px;
}

.ui-messages-close {
color: $warnMessageTextColor;
}
}

.ui-messages-error {
background-color: $errorMessageBgColor;
border-color: $errorMessageBgColor;
color: $errorMessageTextColor;

.ui-messages-error-icon {
@include icon_override("\f06a");
font-size: 24px;
margin-top: -4px;
}

.ui-messages-close {
color: $errorMessageTextColor;
}
}

.ui-messages-fatal {
background-color: $fatalMessageBgColor;
border-color: $fatalMessageBgColor;
color: $fatalMessageTextColor;

.ui-messages-fatal-icon {
@include icon_override("\f06a");
font-size: 24px;
margin-top: -4px;
}

.ui-messages-close {
color: $fatalMessageTextColor;
}
}

.ui-messages-close {
font-size: 16px;
@include transition(color .3s);
}
}

.ui-message {

&.ui-message-info {
background-color: $infoMessageBgColor;
border-color: $infoMessageBgColor;
color: $infoMessageTextColor;

.ui-message-info-icon {
@include icon_override("\f05a");
font-size: 16px;
margin-top: -1px;
}
}

&.ui-message-warn {
background-color: $warnMessageBgColor;
border-color: $warnMessageBgColor;
color: $warnMessageTextColor;

.ui-message-warn-icon {
@include icon_override("\f071");
font-size: 16px;
margin-top: -1px;
}
}

&.ui-message-error {
background-color: $errorMessageBgColor;
border-color: $errorMessageBgColor;
color: $errorMessageTextColor;

.ui-message-error-icon {
@include icon_override("\f06a");
font-size: 16px;
margin-top: -1px;
}
}

&.ui-message-fatal {
background-color: $fatalMessageBgColor;
border-color: $fatalMessageBgColor;
color: $fatalMessageTextColor;

.ui-message-fatal-icon {
@include icon_override("\f06a");
font-size: 16px;
margin-top: -1px;
}
}
}

.ui-growl {
top: 85px;

.ui-growl-item-container {
@include opacity(.95);
@include overlay-shadow();

&.ui-growl-info {
background-color: $infoMessageBgColor;
border-color: $infoMessageBgColor;
color: $infoMessageTextColor;

.ui-growl-image {
@include icon_override("\f05a");
font-size: 36px;
}
}

&.ui-growl-warn {
background-color: $warnMessageBgColor;
border-color: $warnMessageBgColor;
color: $warnMessageTextColor;

.ui-growl-image {
@include icon_override("\f071");
font-size: 36px;
}
}

&.ui-growl-error {
background-color: $errorMessageBgColor;
border-color: $errorMessageBgColor;
color: $errorMessageTextColor;

.ui-growl-image {
@include icon_override("\f06a");
font-size: 36px;
}
}

&.ui-growl-fatal {
background-color: $fatalMessageBgColor;
border-color: $fatalMessageBgColor;
color: $fatalMessageTextColor;

.ui-growl-image {
@include icon_override("\f06a");
font-size: 36px;
}
}
}
}

}

User avatar
aragorn
Posts: 3610
Joined: 29 Jun 2013, 12:38

04 Jul 2018, 10:51

Do you have _variables.scss file in your project? The variables such as $infoMessageBgColor, $infoMessageTextColor are inside it. Please check them.

LCT
Posts: 9
Joined: 05 Sep 2017, 11:48

11 Jul 2018, 13:36

Yes I have _variables.scss inside sass directory. What to do next to avoid this error please ?

User avatar
aragorn
Posts: 3610
Joined: 29 Jun 2013, 12:38

17 Jul 2018, 09:23

Interesting!!

Did you check variables such as $infoMessageBgColor, $infoMessageTextColor? I suggest that you can download Verona Layout again. Then try only the following commands;
- sass -w src/main/webapp/resources/ --sourcemap=none
- mvn jetty:run

Also, which sass version are you using? Please check sass -v command in command line.

Best Regards,

Post Reply

Return to “Verona - PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest