Angular-cli: Since 1.6.4 Angular Material CSS import does not work anymore (breaking change)

Created on 12 Jan 2018  ·  45Comments  ·  Source: angular/angular-cli

Versions

Angular CLI: 1.6.4
Node: 9.4.0
OS: linux x64
Angular: 5.2.0
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cdk: 5.0.4
@angular/cli: 1.6.4
@angular/material: 5.0.4
@angular-devkit/build-optimizer: 0.0.37
@angular-devkit/core: 0.0.24
@angular-devkit/schematics: 0.0.45
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.9.4
@schematics/angular: 0.1.12
typescript: 2.6.2
webpack: 3.10.0

Repro steps

A new Angular CLI and Angular Material project like mentioned here:
https://material.angular.io/guide/getting-started

Observed behavior

The import @import "~@angular/material/prebuilt-themes/indigo-pink.css"; in the styles.css fails:

ERROR in ./node_modules/css-loader?{"sourceMap":false,"import":false}!./node_modules/postcss-loader/lib?{"ident":"postcss","sourceMap":false}!./src/styles.css
Module build failed: Error: Can't resolve '~@angular/material/prebuilt-themes/indigo-pink.css' in '/.../src'
    at onError (/.../node_modules/enhanced-resolve/lib/Resolver.js:61:15)
    at loggingCallbackWrapper (/.../node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
    at runAfter (/.../node_modules/enhanced-resolve/lib/Resolver.js:158:4)
    at innerCallback (/.../node_modules/enhanced-resolve/lib/Resolver.js:146:3)
    at loggingCallbackWrapper (/.../node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
    at next (/.../node_modules/tapable/lib/Tapable.js:252:11)
    at /.../node_modules/enhanced-resolve/lib/UnsafeCachePlugin.js:40:4
    at loggingCallbackWrapper (/.../node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
    at runAfter (/.../node_modules/enhanced-resolve/lib/Resolver.js:158:4)
    at innerCallback (/.../node_modules/enhanced-resolve/lib/Resolver.js:146:3)
    at loggingCallbackWrapper (/.../node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
    at next (/.../node_modules/tapable/lib/Tapable.js:252:11)
    at innerCallback (/.../node_modules/enhanced-resolve/lib/Resolver.js:144:11)
    at loggingCallbackWrapper (/.../node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
    at next (/.../node_modules/tapable/lib/Tapable.js:249:35)
    at resolver.doResolve.createInnerCallback (/.../node_modules/enhanced-resolve/lib/DescriptionFilePlugin.js:44:6)
 @ ./src/styles.css 4:14-138
 @ multi ./src/styles.css

Desired behavior

No error or update Angular Material Getting started section.

Mention any other details that might be useful (optional)

Worked until 1.6.3 :)

1 (urgent) bufix
Source
picture Martin-Wegner
👍47

Most helpful comment

Regarding the release notes for Angular 5.2

I'm frankly getting sick of reading things like 'This is a minor release that is a drop-in replacement for 5.1 containing many bugfixes.' and then having to spend 2 hours getting it to work until i stumble upon the right issue after having gone round and round in circles.

I just cannot fathom how nobody involved in releasing 5.2 would stop to think 'hmm perhaps this update of our main project might cause a conflict with the latest version of our other main project'.

It just wastes probably literally millions of hours and all you need is to add a Known Issues section that is kept updated. I'm sorry but it's pathetic.

picture simeyla on 12 Jan 2018
👍39 👎7 ❤2 😕1

All 45 comments

Same problem here
The postcss-url callbacks are never invoked

jolafrite picture jolafrite on 12 Jan 2018

This is indeed a defect and will be corrected in the next patch release. The tilde can actually be removed to retain existing behavior.

clydin picture clydin on 12 Jan 2018
👍20 🎉6 ❤4

Same problem here

ERROR in ./node_modules/css-loader?{"sourceMap":false,"import":false}!./node_modules/postcss-loader/lib?{"ident":"postcss","sourceMap":false}!./src/styles.css
Module build failed: Error: Can't resolve '~@angular/material/prebuilt-themes/indigo-pink.css'

pferretti picture pferretti on 12 Jan 2018

Thanks @clydin ! removing the tilde correct the behaviour for Angular Material theme import.
In my project I also have an import for

@import "~material-design-icons/iconfont/material-icons.css";

and removing the tilde actually give the error


ERROR in ./node_modules/css-loader?{"sourceMap":false,"import":false}!./node_modules/postcss-loader/lib?{"ident":"postcss","sourceMap":false}!./src/styles.css
Module not found: Error: Can't resolve './MaterialIcons-Regular.woff2'

It worked until angular cli version 1.6.3 :-)

pferretti picture pferretti on 12 Jan 2018
👍6

@pferretti I provided further details over here on that particular problem: https://github.com/angular/angular-cli/issues/9166#issuecomment-357249253

Also, unless the application does not have access to the internet or has restrictions thereof, adding this to index.html should typically provide a performance benefit over the package import method:

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
clydin picture clydin on 12 Jan 2018

Thank you @clydin , but unfortunately my app has restrictions and I have to rely on font self-hosting.

For reference, I temporarily copied Material Icon fonts in my assets folder and added to style.css the styles specified at https://google.github.io/material-design-icons/#setup-method-2-self-hosting

Probably not elegant, but it's a temporary solution that works :-)

pferretti picture pferretti on 12 Jan 2018

@pferretti You can also add the file to the .angular-cli.json styles array. That should copy it to the source and make a style link to it in head (just like it does for src/styles.css).

Edit: Nevermind, you need multiple files, then that wont work

LosD picture LosD on 12 Jan 2018
👍1

Is this related to the issue with the updated autoprefixer? The autoprefixer version that was inhibiting use of [email protected] still does not appear to be functioning. (See 975f45a)

aarongranade picture aarongranade on 12 Jan 2018

@aarongranade it's not related and that should be working. If it is not, ensure that the project's version of the CLI is updated (not just the global) and if the problem persists check which versions of autoprefixer are installed via npm ls autoprefixer and please respond in this issue: https://github.com/angular/angular-cli/issues/9029

clydin picture clydin on 12 Jan 2018

the solution I do to fix this issue is to change the part in https://github.com/angular/angular-cli/blob/1.6.x/packages/%40angular/cli/models/webpack-configs/styles.ts#L70 to

postcssImports({
        resolve: (url: string, context: string) => {
          return new Promise<string>((resolve, reject) => {
            if(url.startsWith('~')) {
              url = url.substr(1);
            }
            loader.resolve(context, url, (err: Error, result: string) => {
              if (err) {
                reject(err);
                return;
              }

              resolve(result);
            });
          });
        },
jolafrite picture jolafrite on 12 Jan 2018

Regarding the release notes for Angular 5.2

I'm frankly getting sick of reading things like 'This is a minor release that is a drop-in replacement for 5.1 containing many bugfixes.' and then having to spend 2 hours getting it to work until i stumble upon the right issue after having gone round and round in circles.

I just cannot fathom how nobody involved in releasing 5.2 would stop to think 'hmm perhaps this update of our main project might cause a conflict with the latest version of our other main project'.

It just wastes probably literally millions of hours and all you need is to add a Known Issues section that is kept updated. I'm sorry but it's pathetic.

simeyla picture simeyla on 12 Jan 2018
👍39 👎7 ❤2 😕1

I moved the @imports from my css styles to my scss styles and they worked again. Note that I was only having the issue for --prod builds so not sure if it's a different issue.

In SCSS:
@import url('https://fonts.googleapis.com/css?family=Material+Icons');

ravishivt picture ravishivt on 13 Jan 2018
👍3

I am also having this issue. Is there an easy way to roll back to angular-cli 1.6.0?

skalpin picture skalpin on 13 Jan 2018
👍2

I am also having this issue.

zahmee picture zahmee on 13 Jan 2018

Had the same issue, but for now I just downgraded CLI back to 1.6.3 (exact), and everything is fine.

sniederb picture sniederb on 13 Jan 2018
👍2

@sniederb
not work with me :(

zahmee picture zahmee on 13 Jan 2018

It's fixed, we just have to wait for a new release.

cyrilletuzi picture cyrilletuzi on 13 Jan 2018
👍2 😄1 👎1

anyone know how to downgrade i've tried :(after uninstall the leatest and clean cache verifed)
npm install -g @angular/[email protected]
but it installed 1.6.4

seffyfisher picture seffyfisher on 13 Jan 2018

I did exactly what @seffyfischer posted, plus put the exact 1.6.3 version in packages. json. Worked for me

sniederb picture sniederb on 13 Jan 2018

@sniederb i changed the "@angular/cli": "1.6.3" in the package.json still no good .
im still getting 

"ERROR in ./node_modules/css-loader?{"sourceMap":false,"import":false}!./node_modules/postcss-loader/lib?{"ident":"postcss","sourceMap":false}!./src/styles.css
Module build failed: Error: Can't resolve '~@angular/material/prebuilt-themes/indigo-pink.css' in 
...."

after putting
@import "~@angular/material/prebuilt-themes/indigo-pink.css"; inside style.css

//
if you enter in the terminal ng -v what do you get ? (im still getting 1.6.4)

seffyfisher picture seffyfisher on 13 Jan 2018

@seffyfisher here's my output. 

>ng -v
Angular CLI: 1.6.3
Node: 6.11.1
OS: win32 x64
Angular: 5.2.0
... animations, common, compiler, compiler-cli, core, forms
... http, platform-browser, platform-browser-dynamic
... platform-server, router

@angular/cdk: 5.0.4
@angular/cli: 1.6.3
@angular/flex-layout: 2.0.0-beta.10
....

I'm not sure what you did differently

sniederb picture sniederb on 13 Jan 2018

Forget all this reverting to 1.6.3 stuff. As @clydin said for now

Just remove the tilde ~ from the path.

@import "@angular/material/prebuilt-themes/indigo-pink.css";

This works for me with Angular 5.2 with CLI 1.6.4

Whether this is a temporary fix that itself will break again I'm not clear. Just make a mental note for the next release that you may have to put the tilde back again. For the record I only saw this error updating from Angular 5.1 > 5.2 - I don't think the CLI version itself is solely to blame.

simeyla picture simeyla on 13 Jan 2018
👍9 ❤5 🎉2 😕1 😄1 👎1

@simeyla thank you so much!

seffyfisher picture seffyfisher on 13 Jan 2018
🎉1

actually removing telda '~' ,solved the problem for me either, i'm using:
[email protected]
[email protected]
windows 8.1-64 bit.

aymanaladdin picture aymanaladdin on 13 Jan 2018
👍3

I encountered this error with my projects as well. I spent a few hours trying to figure out why my builds were all of sudden failing. I don't believe changing how you process css imports through the CLI should be changed in patch release that could break projects.

I was able to get passed the issue by reverting back to CLI v1.6.2. I will update to a new version when the fix for this issue is released.

joswalt picture joswalt on 14 Jan 2018

This is indeed a serious problem (despite a simple workaround). I have multiple angular apps built with angular material, and they are hosted on different services via CI (mostly, with the build running in a docker container). All these apps (which had code commits for the last couple of days) are now failing because the ci script installs/uses the recent version of ng cli during the build/deployment process.

I'd appreciate it if the Angular team could share the ETA for the fix.

realharry picture realharry on 14 Jan 2018

same issue, any solution for this or any suggestion to downgrade to 1.6.3

jamsheer-thottathil picture jamsheer-thottathil on 16 Jan 2018

I have the same problem with 1.6.4 with import related paths to icon font files that still work in 1.6.3.
So this is not an issue specific to Material CSS import (maybe a change of title ?).
I also noticed this new issue #9235 which is also related to another broken behavior (source maps) in relation with scss/css in the 1.6.4 release.
So it seems a bunch of the SCSS/CSS treatment has to be fixed before the next release and use 1.6.3 for now.

Stephane-Peyroutet picture Stephane-Peyroutet on 16 Jan 2018

I reported https://github.com/angular/angular-cli/issues/9235 and rolling back to 1.6.3 does not help my issue.

smlombardi picture smlombardi on 16 Jan 2018

Yeah, the problem seems to be the tilda not being recognized by 1.6.4 as a reference to node_modules. I have the same issue with bootstrap and material, references on styles.scss. Removing the tilda did not fix it. For now, rolling back to 1.6.3 seems to be the only solution.

fourctv picture fourctv on 16 Jan 2018

downgrade is working, stop ng serve, downgrade package.json

 "devDependencies": {
    "@angular/cli": "^1.6.3",
 ...
}

then run again in your project

 npm i -S -d -D @angular/cli
+ @angular/[email protected]
added 3 packages, removed 12 packages, updated 3 packages and moved 7 packages in 16.723s

run ng serve

 agb@MacPro  ~/Sites/test   development ●  ng serve
Your global Angular CLI version (1.6.4) is greater than your local
version (1.6.3). The local Angular CLI version is used.

To disable this warning use "ng set --global warnings.versionMismatch=false".
** NG Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
Date: 2018-01-17T09:42:10.576Z
Hash: f2e3ecfc884e2f1a1625
Time: 28136ms
chunk {inline} inline.bundle.js (inline) 5.79 kB [entry] [rendered]
chunk {main} main.bundle.js (main) 535 kB [initial] [rendered]
chunk {polyfills} polyfills.bundle.js (polyfills) 607 kB [initial] [rendered]
chunk {scripts} scripts.bundle.js (scripts) 20.8 kB [initial] [rendered]
chunk {styles} styles.bundle.js (styles) 1.67 MB [initial] [rendered]
chunk {vendor} vendor.bundle.js (vendor) 45 MB [initial] [rendered]

webpack: Compiled successfully.

full depedencies

"dependencies": {
    "@angular/animations": "^5.2.0",
    "@angular/cdk": "^5.0.4",
    "@angular/common": "^5.2.0",
    "@angular/compiler": "^5.2.0",
    "@angular/core": "^5.2.0",
    "@angular/flex-layout": "^2.0.0-beta.12",
    "@angular/forms": "^5.2.0",
    "@angular/http": "^5.2.0",
    "@angular/material": "^5.0.4",
    "@angular/platform-browser": "^5.2.0",
    "@angular/platform-browser-dynamic": "^5.2.0",
    "@angular/platform-server": "^5.2.0",
    "@angular/router": "^5.2.0",
    "@asymmetrik/ngx-leaflet": "^3.0.1",
    "@ngrx/effects": "^4.1.1",
    "@ngrx/router-store": "^4.1.1",
    "@ngrx/store": "^4.1.1",
    "@ngrx/store-devtools": "^4.1.1",
    "@types/leaflet": "^1.2.5",
    "@types/lodash": "^4.14.92",
    "angular2-jwt": "^0.2.3",
    "angular2-jwt-refresh": "^0.1.0",
    "apollo-angular": "^1.0.1",
    "apollo-angular-link-http": "^1.0.1",
    "apollo-cache-inmemory": "^1.1.5",
    "apollo-client": "^2.2.0",
    "apollo-link": "^1.0.7",
    "apollo-link-context": "^1.0.3",
    "apollo-link-http": "^1.3.2",
    "apollo-link-state": "^0.3.1",
    "apollo-link-ws": "^1.0.4",
    "apollo-utilities": "^1.0.4",
    "core-js": "^2.5.3",
    "devextreme": "^17.2.4",
    "devextreme-angular": "^17.2.4",
    "faker": "^4.1.0",
    "graphql": "^0.12.3",
    "graphql-subscriptions": "^0.5.6",
    "graphql-tag": "^2.6.1",
    "hammerjs": "^2.0.8",
    "leaflet": "^1.3.0",
    "lodash.merge": "^4.6.0",
    "logrocket": "^0.6.2",
    "logrocket-ngrx": "0.0.0",
    "ngrx-store-logger": "^0.2.0",
    "node-sass": "^4.7.2",
    "raven-js": "^3.22.1",
    "rxjs": "^5.5.6",
    "subscriptions-transport-ws": "^0.9.5",
    "zone.js": "^0.8.20"
  },
  "devDependencies": {
    "@angular/cli": "^1.6.3",
    "@angular/compiler-cli": "^5.2.0",
    "@angular/language-service": "^5.2.0",
    "@storybook/addon-actions": "^3.4.0-alpha.1",
    "@storybook/addon-links": "^3.4.0-alpha.1",
    "@storybook/addon-notes": "^3.4.0-alpha.1",
    "@storybook/angular": "^3.4.0-alpha.1",
    "@types/jasmine": "^2.8.4",
    "@types/jasminewd2": "^2.0.3",
    "@types/lodash-es": "^4.17.0",
    "@types/node": "^9.3.0",
    "codelyzer": "~4.0.2",
    "jasmine-core": "~2.8.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "^2.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.3.3",
    "karma-jasmine": "~1.1.1",
    "karma-jasmine-html-reporter": "^0.2.2",
    "ngrx-store-freeze": "^0.2.0",
    "protractor": "~5.2.2",
    "serenity-js": "^1.10.2",
    "ts-node": "^4.1.0",
    "tslint": "~5.9.1",
    "typescript": "^2.6.2",
    "webpack-bundle-analyzer": "^2.9.2"
  },
agborkowski picture agborkowski on 17 Jan 2018
👍2

Downgrade worked to me :)

jamsheer-thottathil picture jamsheer-thottathil on 17 Jan 2018
👍1

I was able to simply remove the tilde from the import statement in my styles.css that was for the Angular Material theme. That worked. However... that approach did not work for other imported styles (font-awesome, etc.). So, I simply went back to the .angular-cli.json file to add my style imports there and that works fine with 1.6.4.

It is odd that the Angular team has let this seemingly simple bug out in the wild for so many days. I would have expected this to be fixed the same day that 1.6.4 was released or the next day.

drullo picture drullo on 17 Jan 2018
🎉1

Duplicate of (#9099)

michael-letcher picture michael-letcher on 17 Jan 2018

This is the eay way to get rid of "ERROR in ./node_modules/css-loader?{"sourceMap":false,"import":false}!."
Run the below:
npm install --save-dev @angular/[email protected]

manimayan picture manimayan on 18 Jan 2018
👍2

I had the same problem but adding 3 lines of code it seems that the problem has disappeared, I will see if everything works and let my know.

I added 

if (url.startsWith("~")) {
              url = url.substr(1);
 }

to the
node_modules\@angular\cli\models\webpack-configs\styles.js
file.

in the place where postcssImports({ appears in the first occurrence
it was

postcssImports({
                resolve: (url, context) => {
                    return new Promise((resolve, reject) => {
                        loader.resolve(context, url, (err, result) => {
                            if (err) {
                                reject(err);
                                return;
                            }
                            resolve(result);
                        });
                    });
                },
   // ...
   // ...

and it has to be

postcssImports({
                resolve: (url, context) => {
                    return new Promise((resolve, reject) => {
                      if (url.startsWith("~")) {
                        url = url.substr(1);
                      }
                        loader.resolve(context, url, (err, result) => {
                            if (err) {
                                reject(err);
                                return;
                            }
                            resolve(result);
                        });
                    });
                },
   // ...
   // ...

this is not my solution, but the only one that helps something, but that no one answered the correctness of the solution from @jolafrite , that's why I call reagain, post the bug-fix.

What do you think about this solution? this correct is it?, and what's next?

CisSasGot picture CisSasGot on 18 Jan 2018
👍1

@CisSasGot Already merged see 5d346c1423f5d7297b1084d14de1665216450798

Taha-Di-Nero picture Taha-Di-Nero on 19 Jan 2018
🎉1 👍1

Resolved in 1.6.5 & 1.7.0-beta.1. If this problem still persists for anyone, please open a new issue detailing the circumstances of the problem.

clydin picture clydin on 22 Jan 2018
👍5

@CisSasGot hi my bug is similar to this however the angular version I am using is "@angular/cli": "1.6.1", they do not have postcssImports how do I fix it? Below is the code

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const path = require("path");
const suppress_entry_chunks_webpack_plugin_1 = require("../../plugins/suppress-entry-chunks-webpack-plugin");
const utils_1 = require("./utils");
const eject_1 = require("../../tasks/eject");
const cssnano = require('cssnano');
const postcssUrl = require('postcss-url');
const autoprefixer = require('autoprefixer');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const customProperties = require('postcss-custom-properties');
/**

  • Enumerate loaders and their dependencies from this file to let the dependency validator
  • know they are used.
    *
  • require('exports-loader')
  • require('style-loader')
  • require('postcss-loader')
  • require('css-loader')
  • require('stylus')
  • require('stylus-loader')
  • require('less')
  • require('less-loader')
  • require('node-sass')
  • require('sass-loader')
    /
    function getStylesConfig(wco) {
    const { projectRoot, buildOptions, appConfig } = wco;
    const appRoot = path.resolve(projectRoot, appConfig.root);
    const entryPoints = {};
    const globalStylePaths = [];
    const extraPlugins = [];
    // style-loader does not support sourcemaps without absolute publicPath, so it's
    // better to disable them when not extracting css
    // https://github.com/webpack-contrib/style-loader#recommended-configuration
    const cssSourceMap = buildOptions.extractCss && buildOptions.sourcemaps;
    // Minify/optimize css in production.
    const minimizeCss = buildOptions.target === 'production';
    // Convert absolute resource URLs to account for base-href and deploy-url.
    const baseHref = wco.buildOptions.baseHref || '';
    const deployUrl = wco.buildOptions.deployUrl || '';
    const postcssPluginCreator = function () {
    // safe settings based on: https://github.com/ben-eb/cssnano/issues/358#issuecomment-283696193
    const importantCommentRe = /@preserve|@licen[cs]e|[@#]\s    source(?:Mapping)?URL|^!/i;
    const minimizeOptions = {
    autoprefixer: false,
    safe: true,
    mergeLonghand: false,
    discardComments: { remove: (comment) => !importantCommentRe.test(comment) }
    };
    return [
    postcssUrl([
    {
    // Only convert root relative URLs, which CSS-Loader won't process into require().
    filter: ({ url }) => url.startsWith('/') && !url.startsWith('//'),
    url: ({ url }) => {
    if (deployUrl.match(/:///) || deployUrl.startsWith('/')) {
    // If deployUrl is absolute or root relative, ignore baseHref & use deployUrl as is.
    return ${deployUrl.replace(/\/$/, '')}${url};
    }
    else if (baseHref.match(/:///)) {
    // If baseHref contains a scheme, include it as is.
    return baseHref.replace(//$/, '') +
    /${deployUrl}/${url}.replace(///+/g, '/');
    }
    else {
    // Join together base-href, deploy-url and the original URL.
    // Also dedupe multiple slashes into single ones.
    return /${baseHref}/${deployUrl}/${url}.replace(///+/g, '/');
    }
    }
    },
    {
    // TODO: inline .cur if not supporting IE (use browserslist to check)
    filter: (asset) => !asset.hash && !asset.absolutePath.endsWith('.cur'),
    url: 'inline',
    // NOTE: maxSize is in KB
    maxSize: 10
    }
    ]),
    autoprefixer(),
    customProperties({ preserve: true })
    ].concat(minimizeCss ? [cssnano(minimizeOptions)] : []);
    };
    postcssPluginCreator[eject_1.postcssArgs] = {
    variableImports: {
    'autoprefixer': 'autoprefixer',
    'postcss-url': 'postcssUrl',
    'cssnano': 'cssnano',
    'postcss-custom-properties': 'customProperties'
    },
    variables: { minimizeCss, baseHref, deployUrl }
    };
    // determine hashing format
    const hashFormat = utils_1.getOutputHashFormat(buildOptions.outputHashing);
    // use includePaths from appConfig
    const includePaths = [];
    let lessPathOptions;
    if (appConfig.stylePreprocessorOptions
    && appConfig.stylePreprocessorOptions.includePaths
    && appConfig.stylePreprocessorOptions.includePaths.length > 0) {
    appConfig.stylePreprocessorOptions.includePaths.forEach((includePath) => includePaths.push(path.resolve(appRoot, includePath)));
    lessPathOptions = {
    paths: includePaths,
    };
    }
    // process global styles
    if (appConfig.styles.length > 0) {
    const globalStyles = utils_1.extraEntryParser(appConfig.styles, appRoot, 'styles');
    // add style entry points
    globalStyles.forEach(style => entryPoints[style.entry]
    ? entryPoints[style.entry].push(style.path)
    : entryPoints[style.entry] = [style.path]);
    // add global css paths
    globalStylePaths.push(...globalStyles.map((style) => style.path));
    }
    // set base rules to derive final rules from
    const baseRules = [
    { test: /.css$/, use: [] },
    { test: /.scss$|.sass$/, use: [{
    loader: 'sass-loader',
    options: {
    sourceMap: cssSourceMap,
    // bootstrap-sass requires a minimum precision of 8
    precision: 8,
    includePaths
    }
    }]
    },
    { test: /.less$/, use: [{
    loader: 'less-loader',
    options: Object.assign({ sourceMap: cssSourceMap }, lessPathOptions)
    }]
    },
    {
    test: /.styl$/, use: [{
    loader: 'stylus-loader',
    options: {
    sourceMap: cssSourceMap,
    paths: includePaths
    }
    }]
    }
    ];
    const commonLoaders = [
    {
    loader: 'css-loader',
    options: {
    sourceMap: cssSourceMap,
    importLoaders: 1,
    }
    },
    {
    loader: 'postcss-loader',
    options: {
    // A non-function property is required to workaround a webpack option handling bug
    ident: 'postcss',
    plugins: postcssPluginCreator,
    sourceMap: cssSourceMap
    }
    }
    ];
    // load component css as raw strings
    const rules = baseRules.map(({ test, use }) => ({
    exclude: globalStylePaths, test, use: [
    'exports-loader?module.exports.toString()',
    ...commonLoaders,
    ...use
    ]
    }));
    // load global css as css files
    if (globalStylePaths.length > 0) {
    rules.push(...baseRules.map(({ test, use }) => {
    const extractTextPlugin = {
    use: [
    ...commonLoaders,
    ...use
    ],
    // publicPath needed as a workaround https://github.com/angular/angular-cli/issues/4035
    publicPath: ''
    };
    const ret = {
    include: globalStylePaths,
    test,
    use: buildOptions.extractCss ? ExtractTextPlugin.extract(extractTextPlugin)
    : ['style-loader', ...extractTextPlugin.use]
    };
    // Save the original options as arguments for eject.
    if (buildOptions.extractCss) {
    ret[eject_1.pluginArgs] = extractTextPlugin;
    }
    return ret;
    }));
    }
    if (buildOptions.extractCss) {
    // extract global css from js files into own css file
    extraPlugins.push(new ExtractTextPlugin({ filename: [name]${hashFormat.extract}.bundle.css }));
    // suppress empty .js files in css only entry points
    extraPlugins.push(new suppress_entry_chunks_webpack_plugin_1.SuppressExtractedTextChunksWebpackPlugin());
    }
    return {
    entry: entryPoints,
    module: { rules },
    plugins: [].concat(extraPlugins)
    };
    }
    exports.getStylesConfig = getStylesConfig;
    //# sourceMappingURL=/users/hansl/sources/hansl/angular-cli/models/webpack-configs/styles.js.map
ghost picture ghost on 2 Feb 2018

I resolved the issue by upgrading @angular/cli to version 1.6.5 via my package.json

"@angular/cli": "^1.6.5",

germs12 picture germs12 on 12 Feb 2018
👍2

@clydin Its still not working with ng build --prod with below config.
Hope you guys added an unit test for this feature.
This doesn't work:
@import 'https://fonts.googleapis.com/icon?family=Material+Icons';

This works:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

devDependencies": {
"@angular/cli": "^1.7.4",
"@angular/compiler-cli": "^5.2.9",
"@angular/language-service": "^5.2.0",
"@types/jasmine": "~2.8.3",
"@types/jasminewd2": "~2.0.2",
"@types/node": "~6.0.60",
"codelyzer": "^4.0.1",
"jasmine-core": "~2.8.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~2.0.0",
"karma-chrome-launcher": "~2.2.0",
"karma-cli": "~1.0.1",
"karma-coverage-istanbul-reporter": "^1.2.1",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.1.2",
"ts-node": "~4.1.0",
"tslint": "~5.9.1",
"typescript": "^2.6.2"
}

moorthi07 picture moorthi07 on 6 Apr 2018
👍1

Yes, there are tests for multiple forms in both global and component styles in all of the following: CSS, SCSS, LESS, and stylus.

Please open a new issue with a minimal reproduction so that the problem can be fully examined.

clydin picture clydin on 6 Apr 2018

@clydin would't it be a duplicate?

moorthi07 picture moorthi07 on 7 Apr 2018

Beyond ridiculous. If I have to spend another set of hours having to hunt down such stupid issues... a tilde that used to work... really? I'm just going to switch to a different framework it is getting impossible to work with.

ghost picture ghost on 27 Sep 2018
👎4 👍1

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._

angular-automatic-lock-bot[bot] picture angular-automatic-lock-bot[bot] on 8 Sep 2019
Was this page helpful?
0 / 5 - 0 ratings

Related issues

jmurphzyo picture jmurphzyo  ·  3Comments
NCC1701M picture NCC1701M  ·  3Comments
hareeshav picture hareeshav  ·  3Comments
ericel picture ericel  ·  3Comments
5amfung picture 5amfung  ·  3Comments