3

I decided to convert a landing page to an AngularJS website, because I needed to add an admin section. To separate the website section from the admin section, I created two modules: website and admin.

The original website has been made with Bootstrap 3, and has a style.css that is custom CSS for all the Bootstrap and the website in general.

On the Angular version, I can load the website properly after I installed Bootstrap 3, and in the root-level style.css I do the following :

@import './app/website/assets/css/style.css';

The issue is that I don't want this CSS to be loaded for the full website (website + admin). With this configuration, the admin section is also affected by the CSS.

The import only works if it is in style.css. If I move the import to the website module in the root component.css styles won't load at all.

I know it must have something to do something with style scoping and ng-deep.

EDIT: The only way I can have the website load properly with the CSS imports within its own module is :

encapsulation: ViewEncapsulation.None
Improve this question
0

1 Answer 1

Reset to default
1

As of right now, there is no way to import css at the module level. Global styles are applied globally, and the default ViewEncapsulation makes it so that component specific styles don't bleed out to the rest of the app.

If I move the import to the website module in the root component.css styles won't load at all.

Importing that css at the modules root component only applies the styles to that one component. I also wouldnt look too hard at ng-deep as it is / will be deprecated https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep

Without knowing how many components are in WebsiteModule or what styles.css looks like, I'll present two options.

1) Rename styles.css (could get confusing since it's not going to be global anymore), import it in each of the components in WebsiteModule.

If that turns out to be too tedious (one bazillion components in WebsiteModule), then

2) I would take a good hard look at the styles.css in question, and see what styles should be applied globally.

Turning off ViewEncapsulation should be a last resort IMO.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.