Chapter 5 Style System - solution branch - title underline style doesn't come into effect

[infiniteshi]

Expected Behaviour

Following the instructions found here https://experienceleague.adobe.com/docs/experience-manager-learn/getting-started-wknd-tutorial-develop/project-archetype/style-system.html?lang=en , the expected behavior is that (1) A title policy can be created successfully with the cmp-title--underline style added. And (2) The style icon (paintbrush) shows up on the page. (3) The paintbrush should work: click on the paintbrush and choose "Underline" from the drop-down, the underline style should be actually applied.

Actual Behaviour

It was a bumpy experience to make Expected Behavior (1) and (2) happen. As a matter of fact, I couldn't make them happen on the system-style-start branch but had to checkout system-style-solution because I wonder what success is like. Unfortunately, even the solution-branch is not working as expected: It only made (1) and (2) happen but not (3).

My own post in the community gives details with screenshots https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/wknd-chapter-5-style-system-style-icon-paintbrush-not-showing-up/m-p/429562#M122331

Reproduce Scenario (including but not limited to)

0. Turn on local author instance 6.5.0
1. Check out the solution branch
2. mvn clean install -PautoInstallSinglePackage -Pclassic
3. Follow the tutorial sections "Add a Title Policy" and "Apply the Underline Style"

Steps to Reproduce

Same as above.

Platform and Version

Local author (jar) 6.5.0 with service pack 6.5.10, core.wcm.components.content 2.13.2

Sample Code that illustrates the problem

Below is essentially another way to reproduce the issue. I suspect the following code in _title.scss is not working properly on my current project setup: /* Default Styles */ .cmp-title {} .cmp-title__text {} .cmp-title__link {}

/* Add Title Underline Style */ .cmp-title--underline { .cmp-title__text { &:after { display: block; width: 84px; padding-top: 8px; content: ''; border-bottom: 2px solid $brand-primary; } } }

This code is not working perfectly in my playground on codepen, either https://tinyurl.com/v5k34f8h when SASS is picked for pre-processor - a syntax error is thrown. But the underline style is applied. If I picked SCSS for pre-processor, no error thrown and everything works as expected.

Logs taken while reproducing problem

[infiniteshi]

I figured it out myself, see https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/wknd-chapter-5-style-system-style-icon-paintbrush-not-showing-up/m-p/429562#M122331 for solution. This issue can be closed.