Angular-cli: Ability to specify different styling per environment

[jstoppa]

Bug Report or Feature Request (mark with an x)

- [ ] bug report -> please search issues before submitting
- [X] feature request

Versions.

@angular/cli: 1.0.0
node: 6.9.1
os: win32 x64

Desired functionality.

Ability to specify different styling per environment

Mention any other details that might be useful.

I’d like to have the ability to pass the styling when executing ng serve or ng build in the same way the environment parameter works (or… is it a way to do this already with angular cli?)
We need this because we are building a product that will have different styling per client

Example:
At the moment, the angular-cli.json takes styling like in the example below (adding the environment configuration to put more context to the desired functionality):

"styles": [
    "styles.scss"
 ],
"environment": "environments/environment.ts",
"environmentSource": "environments/environment.ts",
"environments": {
    "development ": "environments/development/environment.ts",
    "client1": "environments/client1/environment.ts",
    "client2": "environments/client1/environment.ts"
}

I would ideally like to be able to set a different style list per environment, I’m suggesting something like this:

"styles": {
    "development": [
        "environments/development/styles/styles.scss"       
    ],
    "client1": [
        "environments/client1/styles/styles.scss"       
    ],
    "client2": [
        "environments/client2/styles/styles.scss"
    ]
 }
"environment" : "environments/environment.ts",
"environmentSource": "environments/environment.ts",
"environments": {
    "development ": "environments/development/environment.ts",
    "client1": "environments/client1/environment.ts",
    "client2": "environments/client1/environment.ts"
}

Then I would run:
for development:
ng serve --environemnt:development --style:development
ng build --bh /development/ --environemnt:development --style:development

for client1:
ng serve --environemnt:client1 --style:client1
ng build --bh /client1/ --environemnt:client1 --style:client1

for client2:
ng serve --environemnt:client2 --style:client2
ng build --bh /client2/ --environemnt:client2 --style:client2

[carndacier]

+1

[mattngan]

Would be good to have this feature :)

[nilsbeuth]

Sounds super dandy

[jcoo02]

+1 Have a requirement for this.

[dougfrench]

+1

[davkraid]

Would be great for templates too.

[changLiuUNSW]

+1 I have requirement for it too

[werthdavid]

+1

[marvinhuebner]

+1

[filipesilva]

I see there's some interest in this sort of feature. I can't promise something like this is going to happen but will keep the issue open for discussion.

I think it's overloading the environment feature somewhat, since it's meant to separate different deployment environments (such as dev/staging/prod) but in here it also means different variations of the same app.

For instance, if you want to use a certain styling and scripts for Client 1, it stands to reason that you should also have dev/staging/prod environments for that client.

[Blacktiger]

In my case, I'm looking at using ExtJS for some of my views. ExtJS has it's own build tool, so I'd like to include the appropriate build (testing, dev, prod etc) in the same angular cli build. Maybe there's another way to accomplish the same thing though?

[marvinhuebner]

Any updates on this?

[aharonbarel]

+1

[Khanji]

Does anyone have a solution similar to the suggestion of @jstoppa ? The need is pretty high here

[usmanahmed061]

any updates ?

[hkreddy]

+1

[markpenaranda]

+1

[gimlidc]

+1

[felipe-mena]

+1

[inesvanstappen]

+1

[jstoppa]

It would be nice to have this functionality. we got this working using a very convoluted way by running a bash script before the build runs which changes the style.scss programmatically to point the imports to the right environment. Not ideal but works.

[skreborn]

Can't you already achieve this functionality with fileReplacements? I haven't tried this, but it seems logical that you could simply do something like the following:

"configurations": {
  "production": {
    "fileReplacements": [
      {
        "replace": "src/environments/development/styles.scss",
        "with": "src/environments/client1/styles.scss"
      }
    ]
  }
}

[jstoppa]

good point! I wasn’t aware of this, I’ll give it a try
Thanks!!!
On Tue, 15 Jan 2019 at 08:27, Levente Morva [e-mail]
wrote:

Can't you already achieve this functionality with fileReplacements
https://angular.io/guide/build#configure-target-specific-file-replacements?
I haven't tried this, but it seems logical that you could simply do
something like the following:

"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/development/styles.scss",
"with": "src/environments/client1/styles.scss"
}
],
...

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/angular/angular-cli/issues/5803#issuecomment-454305965,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABBj-wuuWmkoywese-IAp9t5q5S-IC2Xks5vDZDcgaJpZM4MxS6Q
.

[filipesilva]

You can can do this today using the --configuration option to override any part of the build options. Please see https://angular.io/guide/workspace-config#alternate-build-configurations for more information.

[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._}