Angular 5 error when add global CSS file

Asked Jan 15 '18 at 19:36

Active Jan 15 '18 at 20:31

Viewed 1,134 times

When I add global CSS file to Angular project or even add some style to styles.css, I get Error from Webpack.

ERROR in ./node_modules/css-loader?{"sourceMap":false,"import":false}!./node_modules/postcss-loader/lib?{"ident":"postcss","sourceMap":false}!./src/assets/style.css Module build failed: Syntax Error

(9:2) Unknown word

7 | width: 100px; 8 | height: 100px;

-> 9 | }

No matter how I add file: angular-cli.json

      "styles": [
    "styles.css",
    "./assets/style.css"
  ],

Or import in styles.css. Can someone help me?

My css file content.

.center-message{
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
width: 100px;
height: 100px;

}

edited Jan 15 '18 at 20:31

asked Jan 15 '18 at 19:36

Юлий Щербак

can post your css your importing ? looks like an error in your css files – Nadhir Falta Jan 15 '18 at 19:46
Problem was in your .css file. – Shakeer Hussain Jan 15 '18 at 20:02
@ShakeerHussain Ok. Look at my css file ther is only one class – Юлий Щербак Jan 15 '18 at 20:32
@NadhirFalta Look at my css file – Юлий Щербак Jan 15 '18 at 20:33
@ЮлийЩербак are you using webpack or angular-cli ? – Nadhir Falta Jan 15 '18 at 20:36
@NadhirFalta angular-cli 1.6.4 – Юлий Щербак Jan 15 '18 at 20:43
@ЮлийЩербак the css you posted is that inside "./assets/style.css" or "style.css" ? – Nadhir Falta Jan 15 '18 at 20:54
@NadhirFalta "./assets/style.css" Even if i add some css code to standart styles.css i get the same error – Юлий Щербак Jan 15 '18 at 20:57
Have you tried to put `` in your index.html instead of what you are doing? – Yazan Mehrez Jan 15 '18 at 21:21
@ЮлийЩербак it's very weird man!! I don't see anything wrong with it. Did What if you empty both files and keep them completely empty, will still get errors ? Also, are you using sass ? – Nadhir Falta Jan 15 '18 at 21:27
@Nadhir Falta No i did not get error when they are empty, and i not use sass. But what interesting bootstrap and material css are imported and work fine. – Юлий Щербак Jan 15 '18 at 21:34
@ЮлийЩербак Alright!! can you take a screenshot of the content of both files?? the complete style code inside both of them ? also make sure the path and naming is correct – Nadhir Falta Jan 15 '18 at 21:36
@Yazan Mehrez if i do it webpack will did not watch my css file and i always must recompile my app??? Or not? – Юлий Щербак Jan 15 '18 at 21:37
@Nadhir Fakta import "../node_modules/bootstrap/dist/css/bootstrap.min.css"; import "~@angular/material/prebuilt-themes/indigo-pink.css"; All my code in styles.css. and all code of style.css at the top. All path are corect. – Юлий Щербак Jan 15 '18 at 21:44

Angular 5 error when add global CSS file

0 Answers0