fileReplacements doesn't work with css files

[Lionardo]

Bug Report or Feature Request (mark with an x)

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

Area

- [x] devkit
- [ ] schematics

Versions

node --version: v9.4.0
npm --version: 5.6.0
macOS high sierra 10.13.5

Repro steps

1- In angular.json add a new configuration and try to replace a css file.
2- add a simple background style to header.local.css
3- import the header.css file into styles.scss

E.g.

"configurations": {
            "local": {              
              "optimization": false,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": false,
              "vendorChunk": false,
              "buildOptimizer": false,
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/enviroment.local.ts"
                },
                {
                  "replace": "src/css/header.css",
                  "with": "src/css/header.local.css"
                }
              ]
            },

The log given by the failure

none

Desired functionality

get the header.css
replaced by header.local.css

Mention any other details that might be useful

Tested with angular cli version 6.0.1 and angular cli version 6.1.0-beta.0

[Serrulien]

As said in #10881 (comment), ng-cli should be able to replace all type of files from 6.1.0, and not only .ts files.
This feature seems to be active in the rc but not in beta, see #10881 (comment).

[filipesilva]

We added the generic replacement functionality in angular/devkit#887, but this is limited to webpack loader and plugins that actually use the webpack file system. This might not work for all files, and we should error out when we know that's the case.

[wctiger]

I have updated my angular/cli to version 6.1.1 and angular-devkit/build-angular to version 0.7.1.
I see ng-build started to replace html files. However it is still not replacing scss files.
My configuration looks like this:

"test": {
  "fileReplacements": [
    {
      "replace": "src/index.html",
      "with": "src/index_test.html"
    },
    {
      "replace": "src/scss/base/_variables.scss",
      "with": "src/scss/themes/_dark.scss"
    }
  ],
  "optimization": true,
  "outputHashing": "all",
  "sourceMap": true,
  "extractCss": true,
  "namedChunks": false,
  "aot": false,
  "extractLicenses": true,
  "vendorChunk": false,
  "buildOptimizer": false
}

[Lionardo]

So I have updated angular/cli to version 6.1.2 but to no avail.
@filipesilva so far we know that it works with html, and ts files. It doesn't work (from what I have tested) with css, scss and json files.
What are the next steps to this issue?
Can we at least make sure that the basic files like css, html and ts get replaced so most use cases are covered?

[richardtreier]

@angular/cli@6.1.3
@angular-devkit/build-angular@0.7.4

OR

@angular/cli@6.1.3
@angular-devkit/build-angular@0.8.0-beta.3

Replacing scss files still not working.

[developcodeza-matthew]

Any updates on this issue? Should it be fixed in 6.1.5?

Im trying to replace a constants.scss (with constants.newconfig.scss) file that I import at the top of my root styles file. But none of the newconfig styles are pulling through.

The strange thing is if I use this method with a component specific scss file it works perfectly. From what I can see its only with the root style files.

Here's a stackoverflow link to my question.

Im using 6.1.5

[tobiaseisenschenk]

with @angular/cli: 6.2.1 I was able to switch the global style file, but not a variables file like this:

"fileReplacements": [
  {
    "replace": "projects/example/src/styles.scss",
    "with": "projects/example/src/styles-example.scss"
  }
]

However the latter would be a more lean solution.

[shprink]

I am writing an app that is built for several clients.
Each clients have a variable.scss file with its Material Design variables
I wanted to use fileReplacements to switch this variable file at build time but it does not work.
I am pretty sure this is a common need, not sure how others do but fixing this issue would make the world a better place.
thanks

[developcodeza-matthew]

@shprink My exact need as well. Holding my thumbs that these issues will be solved soon so we can use fileReplacements as you would with Android Build Flavors or Swifts Build Variants

[WuglyakBolgoink]

@shprink same 👍

I created component "widget" and need some static demo for this component. It mean, that I need to change controller, but html and styles stay same. To do it I can use "fileReplacement" feature. But it doesn't work...

src/app/widget/widget.component.ts:

import {Component, OnInit} from '@angular/core';

@Component({
    selector: 'fh-widget',
    templateUrl: './widget.component.html',
    styleUrls: ['./widget.component.scss']
})
export class WidgetComponent implements OnInit {
    title = '';

    constructor() {
    }

    ngOnInit() {
        this.title = 'wodget - real component';
    }
}

src/app/widget/widget-static/widget.component.ts

import {Component, OnInit} from '@angular/core';

@Component({
    selector: 'fh-widget',
    templateUrl: './widget.component.html',
    styleUrls: ['./widget.component.scss']
})
export class WidgetComponent implements OnInit {
    title = '';

    constructor() {
    }

    ngOnInit() {
        this.title = 'widget - static component';
    }
}

and create a custom configuration with:

"fileReplacements": [
                                {
                                    "replace": "src/environments/environment.ts",
                                    "with": "src/environments/environment.prod.ts"
                                },
                                {
                                    "replace": "src/app/widget/widget.component.ts",
                                    "with": "src/app/widget/widget-static/widget.component.ts"
                                }
]

But ng build -c static-demo has error:

NgModule has path until original component src/app/widget/widget.component.ts.

if I remove html+styles, because I don't need, then ng build has another error:

ERROR in : Couldn't resolve resource ./widget.component.scss relative to /..../src/app/widget/widget-static/widget.component.ts

do I something wrong?