angular cli build does not include css component

Question

Reading the angular-cli documentation and some discussion on stack overflow I had understand that when a project is done with generated components, the inline styles will be all included in the build by default, but when I build my project it seems that none of the inline styles were included.
For example this component:

Component

import { MenubarService } from '../../services/menubar-service/menubar.service'
 
@Component({
    selector: 'app-login',
    templateUrl: './login.component.html',
    styleUrls: ['./login.component.css'],
    providers:[LoginService]
})
export class LoginComponent implements OnInit {
    constructor(.......

the login.component.css file is not present in the final project. I have noticed it for two reason:
First clearly the style of my app is different from the one that I have when I use 'ng serve' command and second because with the browser inspector element I don't find trace of my css.
That's my angular-cli's configuration file

{
  "project": {
  "version": "1.0.0-beta.18",
  "name": "genioimprese"
},
"apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "images",
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.json",
      "prefix": "app",
      "mobile": false,
      "styles": [
        "styles.css",
        "paper.css"
      ],
      "scripts": [],
      "environments": {
        "source": "environments/environment.ts",
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],
  "addons": [],
  "packages": [],
  "e2e": {
    "protractor": {
      "config": "./protractor.conf.js"
    } 
  },
  "test": {
    "karma": {
      "config": "./karma.conf.js"
    }
  },
  "defaults": {
    "styleExt": "css",
    "prefixInterfaces": false,
    "inline": {
      "style": false,
      "template": false
    },
    "spec": {
      "class": false,
      "component": true,
      "directive": true,
      "module": false,
      "pipe": true,
      "service": true
    }
  }
}

except for some styles and assets it's clearly the default file of a new angular-cli projects. I think there's something wrong in my configuration file but the only documentation that I found is here, and I didn't find anything that helps me.

CSS

a{
    color: #0c699e;
}
a:hover,a:active,a:focus{
    color: #218fce;
}

.login{
    text-align: center;
    background-color: white;
    height: 100%;
    padding-top: 7%;
}
.login > .logo{
    height: 30%;
    width: 50%;
}
.input[type='text']{
    background-color: grey;
    color: #218fce;
    border: none; 
    border-radius: 0;
}  
h4{
    color: #218fce;
}
.form-group{
    margin-bottom: 10px;
}
form{
    margin-bottom: 0px;
}
.checkbox-inline{
    margin: 0;
}

Edit: nevermind, it's not... What is this doing in your config: "inline": { "style": false, "template": false },? I have not seen this before. Could it be related? — Riscie
– Riscie, Commented Nov 9, 2016 at 11:07
Actually, in the prod bundle, there will not be a login.component.css. angular-cli (webpack) will bundle your css differently than in the normal ng serve build. Could it be a caching issue which affects that styles in your prod build do get shown differently than in the dev build? Can you show some css maybe? — Riscie
– Riscie, Commented Nov 9, 2016 at 11:14
@Riscie no i have not edit that piece of code, but i have the same suspect about thei style value. But the problem is that there is none of the style tag in the prod bundle, i can let you see the css code but it's a real simple piece of code. — mautrok
– mautrok, Commented Nov 9, 2016 at 13:48
And doing ng build --prod is where your styles do not get displayed, right? When opening that production build in your browser, did you open the console or network tab in the dev-tools to see wether there are some issues? — Riscie
– Riscie, Commented Nov 9, 2016 at 14:42
yes is the prod build that i check,no issues in the console, i think that something missing, do you want to see the dist folder? — mautrok
– mautrok, Commented Nov 9, 2016 at 15:03

Ben Racicot · Accepted Answer · 2021-09-26 14:58:52Z

1

I know this is an old question but Angular's CLI now includes some CSS optimization options which just now caused my app's global stylesheet to output as media=print.

Despite having NO print MQs, this media attr obviously causes no styles to be applied.

<link rel="stylesheet" ... href="styles.css" media="print">

"architect": ...
"build": ...
"configurations": {
  "dev": {
    ...
    "optimization": {
      "scripts": true,
      "styles": {
        "minify": true,
        "inlineCritical": false <--- fix
      },
      "fonts": true
    }

answered Sep 26, 2021 at 14:58

Ben Racicot

6,04816 gold badges82 silver badges140 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

daiscog Over a year ago

The media="print" thing is a hack to make the the stylesheet load asynchronously. What you've omitted in your snippet is the onload="this.media='all'" handler on the same link element, which changes the media attribute to all after the stylesheet has loaded. This is an optimisation to stop the downloading and parsing of non-critical CSS from blocking the initial render. Downside is it requires unsafe-inline or unsafe-hashes script-src CSP policy otherwise the onload handler is blocked.

Ben Racicot Over a year ago

Hi @daiscog that's a big detail. Can you link me/us to an official source for this?

daiscog Over a year ago

Some useful links: 1. blog.ninja-squad.com/2021/01/21/angular-cli-11.1/… 2. dev.to/0xdbe/angular-security-disable-inline-critical-css-2n9g 3. angular.io/guide/workspace-config#styles-optimization-options

Collectives™ on Stack Overflow

angular cli build does not include css component

Component

CSS

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Component

CSS

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related