title: Scss files are not compiled as css file in ionic 5
body: <p>I am using <strong>ionic 5</strong> with <strong>angular 8</strong> in my project. I have introduced Sass variables SCSS files which is not getting converted into CSS. I can see only SCSS file compiled while serving with ionic serve command.</p>
  <p>What am I doing wrong here? How to compile SCSS into CSS in live reload always. Please suggest a way. Thanks in advance.</p>
  <pre><code>$secondary-color: #162a38;
  $base-color: #407294;
  
  .custom-alert .alert-input {
    color: $base-color !important;
  }
  </code></pre>
  <p>My package.json look like below:</p>
  <pre><code>&quot;dependencies&quot;: 
  &quot;@angular/common&quot;: &quot;~8.1.2&quot;,
  &quot;@angular/core&quot;: &quot;~8.1.2&quot;,
  &quot;@angular/fire&quot;: &quot;^5.2.3&quot;,
  &quot;@angular/forms&quot;: &quot;~8.1.2&quot;,
  &quot;@angular/platform-browser&quot;: &quot;~8.1.2&quot;,
  &quot;@angular/platform-browser-dynamic&quot;: &quot;~8.1.2&quot;,
  &quot;@angular/router&quot;: &quot;~8.1.2&quot;,
  &quot;@fortawesome/angular-fontawesome&quot;: &quot;^0.5.0&quot;,
  &quot;@fortawesome/fontawesome-svg-core&quot;: &quot;^1.2.32&quot;,
  &quot;@fortawesome/free-brands-svg-icons&quot;: &quot;^5.15.1&quot;,
  &quot;@fortawesome/free-regular-svg-icons&quot;: &quot;^5.15.1&quot;,
  &quot;@fortawesome/free-solid-svg-icons&quot;: &quot;^5.15.1&quot;,
  &quot;@ionic-native/base64&quot;: &quot;^5.29.0&quot;,
  &quot;@ionic-native/core&quot;: &quot;^5.0.0&quot;,
  &quot;@ionic-native/file&quot;: &quot;^5.29.0&quot;,
  &quot;@ionic-native/file-chooser&quot;: &quot;^5.29.0&quot;,
  &quot;@ionic-native/file-path&quot;: &quot;^5.29.0&quot;,
  &quot;@ionic-native/splash-screen&quot;: &quot;^5.0.0&quot;,
  &quot;@ionic-native/status-bar&quot;: &quot;^5.0.0&quot;,
  &quot;@ionic/angular&quot;: &quot;^5.4.0&quot;,
  &quot;@ionic/core&quot;: &quot;5.4.0&quot;,
  &quot;@ionic/storage&quot;: &quot;^2.2.0&quot;,
  &quot;@types/jquery&quot;: &quot;^3.5.1&quot;,
  &quot;com-badrit-base64&quot;: &quot;^0.2.0&quot;,
  &quot;cordova&quot;: &quot;^9.0.0&quot;,
  &quot;cordova-android&quot;: &quot;8.1.0&quot;,
  &quot;cordova-ios&quot;: &quot;5.1.0&quot;,
  &quot;cordova-plugin-camera&quot;: &quot;^4.1.0&quot;,
  &quot;cordova-plugin-file&quot;: &quot;^6.0.2&quot;,
  &quot;cordova-plugin-filechooser&quot;: &quot;^1.2.0&quot;,
  &quot;cordova-plugin-filepath&quot;: &quot;^1.5.8&quot;,
  &quot;cordova-sqlite-storage&quot;: &quot;^4.0.0&quot;,
  &quot;core-js&quot;: &quot;^2.5.4&quot;,
  &quot;fast-glob&quot;: &quot;^3.2.4&quot;,
  &quot;firebase&quot;: &quot;^7.6.1&quot;,
  &quot;ionicons&quot;: &quot;^5.2.3&quot;,
  &quot;jquery&quot;: &quot;^3.5.1&quot;,
  &quot;lodash&quot;: &quot;^4.17.20&quot;,
  &quot;ngx-quill&quot;: &quot;^12.0.1&quot;,
  &quot;npm&quot;: &quot;^6.13.4&quot;,
  &quot;quill&quot;: &quot;^1.3.7&quot;,
  &quot;rxjs&quot;: &quot;~6.5.1&quot;,
  &quot;tslib&quot;: &quot;^1.9.0&quot;,
  &quot;zone.js&quot;: &quot;~0.9.1&quot;
  
  
  &quot;devDependencies&quot;: 
  &quot;@angular-devkit/architect&quot;: &quot;~0.801.2&quot;,
  &quot;@angular-devkit/build-angular&quot;: &quot;~0.801.2&quot;,
  &quot;@angular-devkit/core&quot;: &quot;~8.1.2&quot;,
  &quot;@angular-devkit/schematics&quot;: &quot;~8.1.2&quot;,
  &quot;@angular/cli&quot;: &quot;~8.1.2&quot;,
  &quot;@angular/compiler&quot;: &quot;~8.1.2&quot;,
  &quot;@angular/compiler-cli&quot;: &quot;~8.1.2&quot;,
  &quot;@angular/language-service&quot;: &quot;~8.1.2&quot;,
  &quot;@ionic-native/camera&quot;: &quot;^5.19.0&quot;,
  &quot;@ionic/angular-toolkit&quot;: &quot;^2.1.1&quot;,
  &quot;@types/jasmine&quot;: &quot;~3.3.8&quot;,
  &quot;@types/jasminewd2&quot;: &quot;~2.0.3&quot;,
  &quot;@types/node&quot;: &quot;~8.9.4&quot;,
  &quot;codelyzer&quot;: &quot;^5.0.0&quot;,
  &quot;cordova-plugin-device&quot;: &quot;^2.0.2&quot;,
  &quot;cordova-plugin-ionic-keyboard&quot;: &quot;^2.2.0&quot;,
  &quot;cordova-plugin-ionic-webview&quot;: &quot;^4.1.3&quot;,
  &quot;cordova-plugin-splashscreen&quot;: &quot;^5.0.2&quot;,
  &quot;cordova-plugin-statusbar&quot;: &quot;^2.4.2&quot;,
  &quot;cordova-plugin-whitelist&quot;: &quot;^1.3.3&quot;,
  &quot;jasmine-core&quot;: &quot;~3.4.0&quot;,
  &quot;jasmine-spec-reporter&quot;: &quot;~4.2.1&quot;,
  &quot;karma&quot;: &quot;~4.1.0&quot;,
  &quot;karma-chrome-launcher&quot;: &quot;~2.2.0&quot;,
  &quot;karma-coverage-istanbul-reporter&quot;: &quot;~2.0.1&quot;,
  &quot;karma-jasmine&quot;: &quot;~2.0.1&quot;,
  &quot;karma-jasmine-html-reporter&quot;: &quot;^1.4.0&quot;,
  &quot;protractor&quot;: &quot;~5.4.0&quot;,
  &quot;ts-node&quot;: &quot;~7.0.0&quot;,
  &quot;tslint&quot;: &quot;~5.15.0&quot;,
  &quot;typescript&quot;: &quot;~3.4.3&quot;
  </code></pre>
  <p>My angular.json build scripts looks like below:</p>
  <pre><code>&quot;build&quot;: {
        &quot;builder&quot;: &quot;@angular-devkit/build-angular:browser&quot;,
        &quot;options&quot;: {
          &quot;outputPath&quot;: &quot;www&quot;,
          &quot;index&quot;: &quot;src/index.html&quot;,
          &quot;main&quot;: &quot;src/main.ts&quot;,
          &quot;polyfills&quot;: &quot;src/polyfills.ts&quot;,
          &quot;tsConfig&quot;: &quot;tsconfig.app.json&quot;,
          &quot;assets&quot;: [
            {
              &quot;glob&quot;: &quot;**/*&quot;,
              &quot;input&quot;: &quot;src/assets&quot;,
              &quot;output&quot;: &quot;assets&quot;
            },
            {
              &quot;glob&quot;: &quot;**/*.svg&quot;,
              &quot;input&quot;: &quot;node_modules/ionicons/dist/ionicons/svg&quot;,
              &quot;output&quot;: &quot;./svg&quot;
            }
          ],
          &quot;styles&quot;: [
            {
              &quot;input&quot;: &quot;src/theme/variables.scss&quot;
            },
            {
              &quot;input&quot;: &quot;src/global.scss&quot;
            }
          ],
          &quot;scripts&quot;: []
        },
  </code></pre>