title: Can Angular CLI pass environment-specific settings to Sass variables?
body: <p>When building an Angular 2 app using Angular CLI/webpack, I'd like to specify values for a few Sass variables. Like make some <code>url(#{$my-base-path}/...)</code> or <code>$fa-font-path</code> point to a CDN in production, or simply set different background colors for acceptance and production builds.</p>
  
  <p>I like how Angular CLI picks a config from, e.g., <code>environments/environment.prod.ts</code>. But I'd also happily use additional command line parameters for <code>ng build</code>, but no luck so far:</p>
  
  <ul>
  <li><p>Without Angular CLI, I guess I could <a href="https://stackoverflow.com/questions/15153613/provide-sass-variables-definitions-on-command-line">use Sass custom functions on the command line</a>, but I don't know how I could use that approach along with Angular CLI. </p></li>
  <li><p>Maybe I can specify the path to some specific <code>my-variables.sccs</code> to use for all Sass compilations?</p></li>
  <li><p>Webpack's sass-loader <a href="https://webpack.js.org/loaders/sass-loader/#environment-variables" rel="noreferrer">states the following</a>, but I've no clue if I can use that with Angular CLI:</p>
  
  <blockquote>
    <p>Environment variables</p>
    
    <p>If you want to prepend Sass code before the actual entry file, you can
    simply set the <code>data</code> option. In this case, the sass-loader will not
    override the <code>data</code> option but just append the entry's content. This is
    especially useful when some of your Sass variables depend on the
    environment:</p>
  
  <pre><code>{
      loader: "sass-loader",
      options: {
          data: "$env: " + process.env.NODE_ENV + ";"
      }
  }
  </code></pre>
  </blockquote></li>
  </ul>
  
  <p>Any idea?</p>