Question

I have a piece of web software / web app which is predominantly javascript. It uses extJS framework and considerable custom scripts. The global stylesheet, call it main.css, consists of extJS library styles and our own new styles and extJS style overrides. This is all compiled using SASS.

Now, I want to embed the app into a web page. This is being done without an embed wrapper, but actually running the app in the page, including using global styles.

The external content in the page (non-app) is custom design using Bootstrap CSS framework and some jquery elements along with some Bootstrap overrides and some custom styles.

We cannot load Bootstrap as the global CSS, since the styles are significantly different and independent of the app styles and therefore want to avoid clashes.

How may I call the syles for their relevant areas, ensuring we can also do things like version control/update the core frameworks – extJS, bootstrap, jquery etc. easily and avoid clashes between the global styles – effectively treating them as different silos?

Answer 1

I may be misunderstanding a critical piece to this, but since you’re using SASS, could you simply use:

#some-custom-area {
    @import "path/to/bootstrap-result.css";
}

That is, take the Bootstrap CSS framework and all the custom rules you’ve written for it (in whatever CSS files those land in after compilation) and import them into your global stylesheet… but wrapped in a #some-custom-area selector. When SASS compiles that, it’ll ensure all rules from the Bootstrap side are valid only within #some-custom-area.

Is that viable?