Angular-cli: Feature request: Enable config to use sass-resources-loader for preprocessor

[sandangel]

Bug Report or Feature Request (mark with an x)

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

Versions.

@angular/cli: 1.3.2 (e)
node: 6.11.2
os: darwin x64
@angular/animations: 4.3.6
@angular/common: 4.3.6
@angular/compiler: 4.3.6
@angular/core: 4.3.6
@angular/forms: 4.3.6
@angular/http: 4.3.6
@angular/platform-browser: 4.3.6
@angular/platform-browser-dynamic: 4.3.6
@angular/router: 4.3.6
@angular/cli: 1.3.2
@angular/compiler-cli: 4.3.6
@angular/language-service: 4.3.6

Repro steps.

I have successfully config an angular project to use src/theme.scss file as a global file and I don't have to add an @import statement at the head of each component scss file. Here is the repo:

git clone https://github.com/sandangel/angular-hmr-global-scss
yarn
yarn start

A little fix before add config to webpack.config.js

After run ng eject, I found there is an issue with the postcss plugin and I had to fix that before successfully build
Here is my fix at postcssPlugins

 url: (asset) => {
        const URL = asset.url; // https://github.com/postcss/postcss-url
        // Only convert root relative URLs, which CSS-Loader won't process into require().
        if (!URL.startsWith('/') || URL.startsWith('//')) {
          return URL;
        }

Desired functionality.

At now, from cli wiki, we can use a file to store all variables and import it in every component scss file where using that variables. Global styles .

Although this introduce stylePreprocessorOptions.includePaths config to help with relative path, it still not a desired approach because include variables, mixin file in each component is still too much boilerplate.

Allow to use custom webpack loader, or at least sass-resources-loader in .angular-cli.json config
In the repo above, I have config webpack to use sass-resources-loader to load src/theme.scss as a global file which will export all variables, mixin... to all components. And in src/app/app.component.scss, I just use variables without any @import statement needed.

h2 a {
    color: $mdc-theme-primary;
}

Mention any other details that might be useful.

I think this could have a huge advantage, and please consider adding it to next cli version.

[filipesilva]

I'm sorry but this isn't something we want to add. Component styles are encapsulated by default, and having un-imported variables leaking in can be problematic. Our recommended approach is to import what you need to use instead of just importing these variables automatically.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}