Since 1.6.4 Angular Material CSS import does not work anymore (breaking change) #9185

Martin-Luft · 2018-01-12T13:23:31Z

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 :)

The text was updated successfully, but these errors were encountered:

jolafrite · 2018-01-12T13:43:52Z

Same problem here
The postcss-url callbacks are never invoked

clydin · 2018-01-12T14:04:12Z

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

pferretti · 2018-01-12T14:05:26Z

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 · 2018-01-12T14:13:44Z

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 :-)

clydin · 2018-01-12T14:31:48Z

@pferretti I provided further details over here on that particular problem: #9166 (comment)

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">

pferretti · 2018-01-12T14:53:09Z

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 :-)

LosD · 2018-01-12T14:56:47Z

@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

aarongranade · 2018-01-12T15:00:13Z

Is this related to the issue with the updated autoprefixer? The autoprefixer version that was inhibiting use of bootstrap@4.0.0-beta.3 still does not appear to be functioning. (See 975f45a)

clydin · 2018-01-12T15:06:17Z

@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: #9029

jolafrite · 2018-01-12T17:20:03Z

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);
            });
          });
        },

simeyla · 2018-01-12T22:41:58Z

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.

ravishivt · 2018-01-13T01:54:33Z

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');

skalpin · 2018-01-13T02:38:15Z

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

zahmee · 2018-01-13T08:51:27Z

I am also having this issue.

sniederb · 2018-01-13T09:50:45Z

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

zahmee · 2018-01-13T10:34:08Z

@sniederb
not work with me :(

cyrilletuzi · 2018-01-13T10:41:39Z

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

seffyfisher · 2018-01-13T12:22:18Z

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

sniederb · 2018-01-13T12:34:27Z

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

seffyfisher · 2018-01-13T12:43:45Z

@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)

sniederb · 2018-01-13T14:24:05Z

@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

simeyla · 2018-01-13T19:17:15Z

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.

seffyfisher · 2018-01-13T19:27:27Z

@simeyla thank you so much!

aymanaladdin · 2018-01-13T21:53:02Z

actually removing telda '~' ,solved the problem for me either, i'm using:
angular-cli@1.6.4
npm@5.6.0
windows 8.1-64 bit.

joswalt · 2018-01-14T05:38:28Z

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.

smlombardi · 2018-01-16T17:08:41Z

I reported #9235 and rolling back to 1.6.3 does not help my issue.

Workaround for the latest CLI bug angular/angular-cli#9185

Workaround for the latest CLI issue angular/angular-cli#9185

fourctv · 2018-01-16T18:05:29Z

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.

agborkowski · 2018-01-17T09:44:34Z

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/cli@1.6.3
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"
  },

jamsheer-thottathil · 2018-01-17T09:48:44Z

Downgrade worked to me :)

drullo · 2018-01-17T15:00:32Z

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.

michael-letcher · 2018-01-17T16:15:24Z

Duplicate of (#9099)

manimayan · 2018-01-18T10:28:55Z

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/cli@1.6.3

j-Cis · 2018-01-18T12:58:33Z

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?

dinerotah · 2018-01-19T08:31:28Z

@CisSasGot Already merged see 5d346c1

- block angular cli to version 1.6.3 until the issue angular/angular-cli#9185 is resolved - add angular-devkit/core to dev dependencies until the issue angular/devkit#256 is resolved

clydin · 2018-01-22T15:32:15Z

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.

ghost · 2018-02-02T15:38:01Z

@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: Default transforms for version 4. cssnano/cssnano#358 (comment)
const importantCommentRe = /@preserve|@licen[cs]e|[@#]\ssource(?: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 (publicPath) Problem with CSS url path when I add publicPath(deployUrl) in angular-cli.json #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

germs12 · 2018-02-12T13:40:39Z

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

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

moorthi07 · 2018-04-06T21:29:08Z

@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"
}

clydin · 2018-04-06T21:41:01Z

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.

moorthi07 · 2018-04-07T19:37:06Z

@clydin would't it be a duplicate?

ghost · 2018-09-27T07:49:07Z

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.

angular-automatic-lock-bot · 2019-09-08T16:41:21Z

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

Martin-Luft changed the title ~~Since 1.6.4 Angular Material CSS import does not work anymore~~ Since 1.6.4 Angular Material CSS import does not work anymore (breaking change) Jan 12, 2018

clydin self-assigned this Jan 12, 2018

clydin added type: bug/fix P1 Impacts a large percentage of users; if a workaround exists it is partial or overly painful labels Jan 12, 2018

huiaic mentioned this issue Jan 12, 2018

ERROR in ./node_modules/css-loader?{"sourceMap":false,"importLoaders":1}!./node_ modules/postcss-loader/lib?{"ident":"postcss","plugins":[null,null,null],"source Map":false}!./node_modules/bootstrap/dist/css/bootstrap.css #9080

Closed

Stephane-Peyroutet mentioned this issue Jan 16, 2018

1.6.4 SCSS/CSS source maps not working #9235

Closed

punisherx added a commit to punisherx/angular-material-dashboard that referenced this issue Jan 16, 2018

Fix the import for the app to compile

73c966c

Workaround for the latest CLI bug angular/angular-cli#9185

punisherx mentioned this issue Jan 16, 2018

Fix the import for the app to compile punisherx/angular-material-dashboard#1

Open

punisherx added a commit to punisherx/angular-material-dashboard that referenced this issue Jan 16, 2018

Removed the tilda from @import

80a4011

Workaround for the latest CLI issue angular/angular-cli#9185

punisherx mentioned this issue Jan 16, 2018

Removed the tilda from @import wangdicoder/angular-material-dashboard#9

Closed

mrbatista mentioned this issue Jan 19, 2018

fix build demo mrbatista/ngx-loader#3

Merged

clydin closed this as completed Jan 22, 2018

JanLoebel mentioned this issue Jan 25, 2018

the style url seems to be something wrong CirclonGroup/angular-tree-component#542

Closed

EugeneSnihovsky mentioned this issue May 4, 2018

SCSS "Module not found: Error: Can't resolve" for @font-face url with relative path #5213

Closed

NickLanam mentioned this issue Jul 9, 2018

Does Angular Cli 6 support @import ~ anymore? #11435

Closed

angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 8, 2019

clydin removed their assignment Feb 4, 2020

Since 1.6.4 Angular Material CSS import does not work anymore (breaking change) #9185

Since 1.6.4 Angular Material CSS import does not work anymore (breaking change) #9185

Comments

Martin-Luft commented Jan 12, 2018

Versions

Repro steps

Observed behavior

Desired behavior

Mention any other details that might be useful (optional)

jolafrite commented Jan 12, 2018

clydin commented Jan 12, 2018

pferretti commented Jan 12, 2018

pferretti commented Jan 12, 2018

clydin commented Jan 12, 2018 • edited Loading

pferretti commented Jan 12, 2018

LosD commented Jan 12, 2018 • edited Loading

aarongranade commented Jan 12, 2018 • edited Loading

clydin commented Jan 12, 2018 • edited Loading

jolafrite commented Jan 12, 2018

simeyla commented Jan 12, 2018 • edited Loading

ravishivt commented Jan 13, 2018 • edited Loading

skalpin commented Jan 13, 2018

zahmee commented Jan 13, 2018

sniederb commented Jan 13, 2018

zahmee commented Jan 13, 2018

cyrilletuzi commented Jan 13, 2018

seffyfisher commented Jan 13, 2018 • edited Loading

sniederb commented Jan 13, 2018

seffyfisher commented Jan 13, 2018 • edited Loading

sniederb commented Jan 13, 2018

simeyla commented Jan 13, 2018 • edited Loading

seffyfisher commented Jan 13, 2018

aymanaladdin commented Jan 13, 2018

joswalt commented Jan 14, 2018

smlombardi commented Jan 16, 2018

fourctv commented Jan 16, 2018

agborkowski commented Jan 17, 2018 • edited Loading

jamsheer-thottathil commented Jan 17, 2018

drullo commented Jan 17, 2018

michael-letcher commented Jan 17, 2018 • edited Loading

manimayan commented Jan 18, 2018

j-Cis commented Jan 18, 2018 • edited Loading

dinerotah commented Jan 19, 2018

clydin commented Jan 22, 2018

ghost commented Feb 2, 2018

germs12 commented Feb 12, 2018

moorthi07 commented Apr 6, 2018 • edited Loading

clydin commented Apr 6, 2018

moorthi07 commented Apr 7, 2018

ghost commented Sep 27, 2018

angular-automatic-lock-bot bot commented Sep 8, 2019

clydin commented Jan 12, 2018 •

edited

Loading

LosD commented Jan 12, 2018 •

edited

Loading

aarongranade commented Jan 12, 2018 •

edited

Loading

clydin commented Jan 12, 2018 •

edited

Loading

simeyla commented Jan 12, 2018 •

edited

Loading

ravishivt commented Jan 13, 2018 •

edited

Loading

seffyfisher commented Jan 13, 2018 •

edited

Loading

seffyfisher commented Jan 13, 2018 •

edited

Loading

simeyla commented Jan 13, 2018 •

edited

Loading

agborkowski commented Jan 17, 2018 •

edited

Loading

michael-letcher commented Jan 17, 2018 •

edited

Loading

j-Cis commented Jan 18, 2018 •

edited

Loading

moorthi07 commented Apr 6, 2018 •

edited

Loading