Custom theme doesn't work compiled for CSS

[Dacker15]

I'm submitting a ... (check one with "x")

[X] bug report => search github for a similar issue or PR before submitting
[ ] support request/question

Notice: feature requests will be ignored, submit a PR if you'd like

Current behavior My angular project used simple CSS. Creating a custom theme and compling with node-sass will produce a theme with other settings. I imported the css file in styles.css in src folder

The SCSS theme

@import "../../../node_modules/ngx-chips/core/styles/core/core";

$color-grey: #546778;
$container-background: #eef2f7;

$tag-background: #4e91e4;
$tag-background--selected: darken($tag-background, 20%);

$siimple-theme--container: (
  line-height: 34px,
  font-size: 14px,
  font-weight: normal,
  color: $color-grey,
  padding-left: 10px,
  padding-right: 10px,
  padding-top: 0px,
  padding-bottom: 0px,
  border: 0px,
  border-radius: 5px,
  outline: 0px,
  background-color: $container-background,
  vertical-align: top,
  box-sizing: border-box
);

$siimple-theme--tag: (
  background: $tag-background,
  background-focused: $tag-background--selected,
  background-active: $tag-background--selected,
  background-hover: $tag-background--selected,
  color: white,
  color-hover: white,
  border-radius: 2px
);

$siimple-theme--icon: (
  fill: white,
  fill-focus: #eee,
  transition: all 0.35s
);

::ng-deep .ng2-tag-input.siimple-theme {
  @include tag-input-theme($siimple-theme--container);
}

::ng-deep tag-input .ng2-tag-input.siimple-theme tag {
  @include tag-theme($siimple-theme--tag);
}

::ng-deep tag-input .ng2-tag-input.siimple-theme tag delete-icon {
  @include icon-theme($siimple-theme--icon);
}

The CSS theme compiled with node-sass

::ng-deep .ng2-tag-input.siimple-theme {
  display: block;
  flex-direction: row;
  flex-wrap: wrap;
  position: relative;
  cursor: text;
  border-radius: 5px;
}
::ng-deep .ng2-tag-input.siimple-theme:focus {
  outline: 0;
}
::ng-deep .ng2-tag-input.siimple-theme.ng2-tag-input--dropping {
  opacity: 0.7;
}
::ng-deep .ng2-tag-input.siimple-theme.ng2-tag-input--loading {
  border: none;
}
::ng-deep .ng2-tag-input.siimple-theme.ng2-tag-input--disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
::ng-deep .ng2-tag-input.siimple-theme .ng2-tags-container {
  flex-wrap: wrap;
  display: flex;
}

::ng-deep tag-input .ng2-tag-input.siimple-theme tag {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  color: white;
  border-radius: 2px;
  background: #4e91e4;
  user-select: none;
  overflow: hidden;
  outline: 0;
  cursor: pointer;
  position: relative;
}
::ng-deep
  tag-input
  .ng2-tag-input.siimple-theme
  tag:not(.readonly):not(.tag--editing):focus {
  background: #1b5eb1;
}
::ng-deep
  tag-input
  .ng2-tag-input.siimple-theme
  tag:not(.readonly):not(.tag--editing):active {
  background: #1b5eb1;
}
::ng-deep
  tag-input
  .ng2-tag-input.siimple-theme
  tag:not(:focus):not(.tag--editing):not(:active):not(.readonly):hover {
  background: #1b5eb1;
  color: white;
}
::ng-deep tag-input .ng2-tag-input.siimple-theme tag.readonly {
  cursor: default;
}
::ng-deep tag-input .ng2-tag-input.siimple-theme tag.readonly:focus,
::ng-deep tag-input .ng2-tag-input.siimple-theme tag:focus {
  outline: 0;
}
::ng-deep tag-input .ng2-tag-input.siimple-theme tag.tag--editing {
  cursor: text;
}

::ng-deep tag-input .ng2-tag-input.siimple-theme tag delete-icon {
  transition: all 0.35s;
  text-align: right;
}
::ng-deep tag-input .ng2-tag-input.siimple-theme tag delete-icon path {
  fill: white;
}
::ng-deep tag-input .ng2-tag-input.siimple-theme tag delete-icon svg {
  vertical-align: bottom;
  height: 34px;
}

Where the theme should app

<tag-input
                    [formControlName]="field"
                    [placeholder]="getPlaceholder(field)"
                    [secondaryPlaceholder]="getPlaceholder(field)"
                    [onlyFromAutocomplete]="true"
                    [addOnPaste]="false"
                    displayBy="label"
                    theme="siimple-theme"
                  >
                    <tag-input-dropdown
                      [autocompleteItems]="form[field].options"
                      [keepOpen]="true"
                      displayBy="label"
                    >
                    </tag-input-dropdown>
                  </tag-input>

Sorry for bad formatting

Expected behavior In element tab of dev tools, I don't see a trace of my theme

*Minimal reproduction of the problem with instructions (if applicable) To reproduce, create a custom theme file, following the example in the doc, compile it with node-sass as devDependecies, import this file in styles.css

What do you use to build your app?. Please specify the version Angular CLI

Angular version: 8.2.0

ngx-chips version: 2.1.0

Browser: Firefox version 74

[Dacker15]

Closing due to library switch