title: Parcel-Angular5 : How do I add SCSS/SASS support?
body: <p>I have a project started with angular cli.</p>
  
  <p>I want to use scss. </p>
  
  <p>In WebStorm's terminal, I typed :</p>
  
  <pre><code>ng set defaults.styleExt scss
  </code></pre>
  
  <p>I renamed all the <code>.css</code> files to <code>.scss</code> and changed the imports :</p>
  
  <pre><code>@Component({
    selector: 'app-logged-in',
    templateUrl: './logged-in.component.html',
    styleUrls: ['./logged-in.component.scss']
  })
  </code></pre>
  
  <p>I have a bizarre situation now: the code in that <code>.scss</code> file that is css3 norm and below is interpreted and code that is scss norm is not.</p>
  
  <p>Ex :</p>
  
  <pre><code>$fg:#00bcd4;
  
  .topMenu{
    display: flex; // &lt;-- interpreted
    background-color: $fg; // &lt;-- not interpreted
  }
  </code></pre>
  
  <p>I tried :</p>
  
  <pre><code>npm i node-sass -S
  npm i sass-loader -S
  </code></pre>
  
  <p>but this yielded absolutely no change and apparently you're not supposed to add them when using angular cli.</p>
  
  <p>I'm also using Parcel. Parcel-sass integration is great but it may not be supported with angular-cli yet. Angular-parcel is quite new.</p>
  
  <p>I don't know.</p>
  
  <p>here's my package-json file :</p>
  
  <pre><code>{
    "name": "web.ui",
    "version": "0.0.0",
    "license": "MIT",
    "scripts": {
      "ng": "ng",
      "parcel": "parcel",
      "start": "parcel ./src/index.html --no-cache",
      "build": "parcel build ./src/index.html  --no-cache"
    },
    "private": true,
    "dependencies": {
      "@angular/animations": "^5.0.0",
      "@angular/common": "^5.0.0",
      "@angular/compiler": "^5.0.0",
      "@angular/core": "^5.0.0",
      "@angular/forms": "^5.0.0",
      "@angular/http": "^5.0.0",
      "@angular/platform-browser": "^5.0.0",
      "@angular/platform-browser-dynamic": "^5.0.0",
      "@angular/router": "^5.0.0",
      "core-js": "^2.4.1",
      "parcel-plugin-inlinesvg": "0.0.12",
      "rxjs": "^5.5.2",
      "zone.js": "^0.8.14"
    },
    "devDependencies": {
      "@angular/cli": "1.6.6",
      "@angular/compiler-cli": "^5.0.0",
      "@angular/language-service": "^5.0.0",
      "@types/jasmine": "~2.5.53",
      "@types/jasminewd2": "~2.0.2",
      "@types/node": "~6.0.60",
      "codelyzer": "^4.0.1",
      "eslint": "4.16.0",
      "eslint-config-prettier": "2.9.0",
      "eslint-plugin-prettier": "2.6.0",
      "jasmine-core": "~2.6.2",
      "jasmine-spec-reporter": "~4.1.0",
      "karma": "~1.7.0",
      "karma-chrome-launcher": "~2.1.1",
      "karma-cli": "~1.0.1",
      "karma-coverage-istanbul-reporter": "^1.2.1",
      "karma-jasmine": "~1.1.0",
      "karma-jasmine-html-reporter": "^0.2.2",
      "parcel-bundler": "^1.2.0",
      "parcel-plugin-eslint": "^1.0.3",
      "parcel-plugin-typescript": "0.2.0-angular.0",
      "postcss-modules": "^1.1.0",
      "prettier": "1.10.2",
      "protractor": "~5.1.2",
      "ts-node": "~3.2.0",
      "tslint": "~5.7.0",
      "typescript": "~2.4.2"
    }
  }
  </code></pre>