angular13: how to manually add scss files by condition to index.html?

Question

I want to add this import

  <link rel="stylesheet" href="./assets/sass/style.scss">
  <link rel="stylesheet" href="./assets/sass/plugins.scss">

by condition to index.html in angular

but it's not work

I want to change style to rtl or ltr by selected language so i change import scss file in index.html

style rtl is

<link rel="stylesheet" href="./assets/sass/style.angular.scss">
<link rel="stylesheet" href="./assets/css/style.rtl.css">

style ltr is

<link rel="stylesheet" href="./assets/sass/style.scss">
<link rel="stylesheet" href="./assets/sass/plugins.scss">

Answer 1

Lets assume the contents of style.angular.scss

.test {
    display: block;
}

Lets assume the contents of style.scss

.test1 {
    display: flex;
}

modify it so that there is a parent class wrapping each of the different styles so the new code will be

style.angular.scss

.body-ltr-class {
    .test {
        display: block;
    }
}

style.scss

.body-rtl-class {
    .test1 {
        display: flex;
    }
}

Now you can import all imports and styles can be applied based on the parent class (either body-ltr-class or body-rtl-class)

For adding class to the body tag, please use the below stack overflow answer

add class to body tag

Answer 2

Please trying using logical properties in css, since it eliminates the need to write 2 different stylesheets for direction. e.g: instead of saying padding-right: 1rem; you can say padding-inline-start: 1rem;. The padding-inline-start looks at the direction your line starts(in this case you are in rtl mode) so padding-inline-start is equal to padding-right.

But if you insist that you want to load different styles based on your language, you have to follow these steps:

• In your angular.json(or project.json) add these styles in this format:

                "styles": [
                {
                    "input": "style-url",
                    "bundleName": "some-name",
                    "inject": false
                },
                "styles": [
                {
                    "input": "style-url2",
                    "bundleName": "some-name2",
                    "inject": false
                },
            ],
  

As you can see, these styles have "inject": false, meaning they will not be added to html's link section by default. You are just saying that you are gonna have 2 lazy loaded files in this part.

next you have add these styles to your html. Make a new service, in that service you have to write a code like this:

        const style = document.createElement('link');
        style.rel = 'stylesheet';
        style.href = `${style-name}.css`;
        style.id = this.${some-id};

        document.head.append(style);

name of your style should be the name you assigned them in the previous step. And you should a conditional state that which style should be added.