angular-cli ignores scss files compilation which are not imported into styles.scss

OS?

All

Versions.

All

Repro steps.

Let say I want to have theme scss files for my application which I wan’t to load at run time based on the theme chosen by the user.

I don’t want to import the theme files such as “theme-light.scss”, “theme-dark.scss” and so on… all the files into “styles.scss” since that way I end up loading all the theme css files loading upfront as part of the initial payload which I want to avoid.

So ng serve it doesn’t compile theme scss files to css files repectively for each theme. Is there a way we can target external sccs files compilation which are actually not part of styles.scss file ?

Once I am able to compile the theme scss files i want to dynamically load theme via javascript code and injected into my index.html as shown below

// when theme “light” is selected <-- index.html -->

<link href="styles.bundle.css" rel="stylesheet">
// css loaded via javascript and inject into html
<link href="assets/scss/theme-light.css" rel="stylesheet" type="text/css" title="dark">

// when theme “dark” is selected <-- index.html -->

<link href="styles.bundle.css" rel="stylesheet">
<link href="assets/scss/theme-light.css" rel="stylesheet" type="text/css" title="light" disabled>
<link href="assets/scss/theme-dark.css" rel="stylesheet" type="text/css" title="dark">

Hope you guys get the idea about the problem and what I am trying to achieve.

Thanks, Bhasker

[beeman]

@bhaskerchari here is an example of an app that does theming, built on angular-cli: https://github.com/housseindjirdeh/angular2-hn

It’s more a matter of how you structure your app/themes using scss, not so much an angular-cli thing.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}