angular-cli: CSS dependent on environment

Question

I am using Angular 2 with angular-cli . For customer A the CSS file style.A.css is relevant, for customer B it's style.B.css . Is it possible make the css files defined in apps[0].styles dependent on the active environment? If not, any elegant solution for this?

The CSS's scope is the whole app, like a totally different appearance. So component scope will not be sufficient.

Answer 1

This is dependent on how your project is setup. And whether you are ejected from the CLI. I use an ejected angular-cli with angular 4 and webpack. You can customize environment files if you are ejected or not ejected, but the css build process is earlier during the build than the environment files. I would recommend customizing the webpack config to copy a file based on your npm script depending on your build target. You can use the GlobCopyWebpackPlugin to copy files to the output folder. Then you would static import that css file.

For example in webpack.config.js I am copying files during the build to the output folder, you could copy a css the same way, then in your main index.html just bring in that css that is supplied by the environment you are building for.

new GlobCopyWebpackPlugin({
  "patterns": [
    "assets",
    "favicon.ico",
    "manifest.json",
    "sw.js"
  ],
  "globOptions": {
    "cwd": process.cwd() + "/src",
    "dot": true,
    "ignore": "**/.gitkeep"
  }
})

My package.json provides the environment flag during the script build process

  "scripts": {
    "ng": "ng",
    "start": "webpack-dev-server --env.target=local --port=4200 --history-api-fallback",

You could use the environment flag to select the appropriate css file for the GlobCopyWebpackPlugin

// export a function that returns a promise that returns the config object
module.exports = function(env) {

const isLocal = env.target === 'local';
if(isLocal) { /* set the css file to a variable mycssfile*/ }

/* code removed for brevity */
  "plugins": [

    new NoEmitOnErrorsPlugin(),

    new GlobCopyWebpackPlugin({
          "patterns": [
            `${mycssfile}`,
            "assets",
            "favicon.ico",
            "manifest.json",
            "sw.js"
          ],
          "globOptions": {
            "cwd": process.cwd() + "/src",
            "dot": true,
            "ignore": "**/.gitkeep"
          }
        })`

Answer 2

You can explore Material palette. Changing one client color palette to another.

https://www.materialpalette.com/

Answer 3

We used different app-names to solve that problem. We defined different customers in our angular-cli.json and defined there which style.css to use for which app name. There we have a default and then all the customers we have and for each we can say which assets we want to use and which styles and even which enviornment is sufficient.

And to start and build the application you then only have to call 'ng serve app-name' or 'ng serve' for default