Questions: How to make sass prefix?

I apply the following prefix setting for ‘sass’. But the output is not what I want. The ‘/’ signs remain. And the text color is not red. Do I need to add another setting? I added the prefix setting as in the document, but I seem to be missing something.

it’s not working.

prefix: "#single-spa-application:\\@kapital\\/dashboard"

output still has ‘/’ signs.

#single-spa-application:\@kapital\/dashboard .deneme {
    color: red;
}

prefix i need

#single-spa-application:@kapital/dashboard .deneme {
    color: red;
}

but when I use it like this, SassError: SassError: Expected identifier. I get an error

[RadValentin]

@ahmetcaglayan I was confused by the various escaped characters but I think it should work. You had it right initially, you just needed to escape the : character. Please try the following:

• set prefix: "#single-spa-application\\:\\@kapital\\/dashboard"
• in SASS and CSS the selector will be prefixed with #single-spa-application\:\@kapital\/dashboard
• The CSS selector above will match elements that have id="single-spa-application:@kapital/dashboard

Example here: https://codepen.io/valentin/pen/KKZLWej

[RadValentin]

@ahmetcaglayan I understand now, in the docs they set the prefix to:

"#single-spa-application\\:\\@org-name\\/project-name"

and then in the CSS output it will become

#single-spa-application\:\@org-name\/project-name

And because the characters are escaped, \:, \@, etc., it will work in plain CSS (https://jsbin.com/fequwemije/edit?html,css,output). The problem is that the SASS compiler doesn’t like this kind of escaping.

I don’t think I can help you. It looks like SASS doesn’t like those escaped characters. I’d suggest using supported characters.