Angular-cli: .scss files not processed from index.html

Created on 21 Aug 2016  路  12Comments  路  Source: angular/angular-cli

Bug Report

.scss files aren't processed to css when included via link tag in index.html

(this would be useful for global styles: e.g. styling the body as this doesn't seem to work in the default app.component.css)

Expected Behavior

.scss files are processed to css if they are included via a link tag in the index.html file.

Actual Behavior

.scss files aren't processed in index.html

Reproduction

  • Create a new project

ng new project-name --prefix pn

  • Add .scss support

ng set defaults.styleExt scss

  • Add link to index.html
<head>
<!-- other things -->

<!-- This could work if webpack were configured to check if theme.css exists; if not, then check for theme.scss and process that -->
<link rel="stylesheet" type="text/css" href="theme.css">


<!-- This doesn't work either.
<link rel="stylesheet" type="text/css" href="theme.scss">
-->
</head>
  • Create theme.scss
@import './variables'

body {
background-color: $bg-color;
}
  • Create variables.scss

$bg-color: red;

  • Serve

ng serve

Version details:

OS: Windows 10
node: 6.3.1
[email protected]

picture PiusNyakoojo

Most helpful comment

@kennyrulez here are a few things you could check

1. Did you create this project with

ng project-name --style=sass

No? Then did you add sass support with

ng set defaults.styleExt scss

2. Is style.scss referenced in one of your components?

// for example

@Component({
  templateUrl: './app.component.html',
  stylesUrl: ['./style.scss']
})

3. Are you trying to style the body tag? For this, you may want to make the stylesheet global

// reference your styles in angular-cli.json

"apps": [
   {
       // ... other stuff
      "styles": [
         "./src/style.scss" // reference your style sheet here
      ]
   }
]

Note: ng serve is just ng build + watching your files for changes then rebuilding and reloading page

picture PiusNyakoojo on 24 Aug 2016
👍2

All 12 comments

can you copy and paste your component code?

cport1 picture cport1 on 21 Aug 2016

@PiusNyakoojo sass will not compile your styles when including them that way. you can only link stylesheets that way if they are static assets. In the current master of the cli you can point to a main stylesheet which can be sass.

deebloo picture deebloo on 21 Aug 2016

if you have a global static stylesheet you want to include you can put it in the public folder. Or if using master in src/assets

deebloo picture deebloo on 21 Aug 2016
👍2

I've tried to put a .scss file in the public folder, but on build it doesn't process it into a css file.

keithmichelson picture keithmichelson on 22 Aug 2016

see #1459

sirajc picture sirajc on 22 Aug 2016

@sirajc Thanks.

This PR addresses my concern: https://github.com/angular/angular-cli/pull/1633

In short:

When this request is merged to the main branch (when the angular-cli team releases the next version of the cli), we can add "styles": "our.style.scss" to angular-cli.json as part of the apps[0] metadata.

Concretely:

"apps": [
    {
      "main": "src/main.ts",
      "tsconfig": "src/tsconfig.json",
      "mobile": false,
      "styles": "src/our.style.scss" // Available in next version of angular-cli
    }
  ],
PiusNyakoojo picture PiusNyakoojo on 22 Aug 2016
👍2

Hello,
sorry to comment an already closed issue, but I need to clarify myself with.
My config OS: Windows 10 node: 6.3.1 [email protected]

If i create in [myproject]/src/app/style.scss this file is ignored by angular-cli and it's not compiled and published alongside the other files?
Just scss in components are parsed when calling ng serve (or ng build)?

Thanks for any clarifications!

kennyrulez picture kennyrulez on 24 Aug 2016

@kennyrulez here are a few things you could check

1. Did you create this project with

ng project-name --style=sass

No? Then did you add sass support with

ng set defaults.styleExt scss

2. Is style.scss referenced in one of your components?

// for example

@Component({
  templateUrl: './app.component.html',
  stylesUrl: ['./style.scss']
})

3. Are you trying to style the body tag? For this, you may want to make the stylesheet global

// reference your styles in angular-cli.json

"apps": [
   {
       // ... other stuff
      "styles": [
         "./src/style.scss" // reference your style sheet here
      ]
   }
]

Note: ng serve is just ng build + watching your files for changes then rebuilding and reloading page

PiusNyakoojo picture PiusNyakoojo on 24 Aug 2016
👍2

@PiusNyakoojo thanks for your response. Number 3 is exactly what i want to achieve.
I modified angular-cli.json as you suggest

"apps": [
    {
      "main": "src/main.ts",
      "tsconfig": "src/tsconfig.json",
      "mobile": false,
       "styles": [
         "./src/app/app.scss"
      ]
    }

and referenced in index.html as
<link rel="stylesheet" type="text/css" href="app/app.css">

No way of getting it working. It seems is not compiling it nor bundling it.

Thanks for your help!

kennyrulez picture kennyrulez on 25 Aug 2016

I hope you don't have mind to join to your conversation.
Currently Im struggling with global_variables.scss` file.

My project is using sass and I want to create one scss file with all variable of my project (something like an global scss). When I am including this _variables.scss file into my app.component.ts or importing into app.component.scss only the stylesheets for app.component are seeing this variables..
When I`m trying to use some variable in another scss I am receiving an error:

Module build failed: xxx xxx Undefined variable: "xxx".

Is it possible to have a _variable.scss and use it variables without including it in every single component?

Kosmonaft picture Kosmonaft on 26 Aug 2016

See response by filipesilva in #1780.
Apparently the global styles configuration is the way to go, but it made it into the documentation before the actual release, so you have to wait for the next webpack release for it to actually work.

"apps": [
   {
       // ... other stuff
      "styles": [
         "./src/style.scss" // reference your style sheet here
      ]
   }
]
martoncsikos picture martoncsikos on 26 Aug 2016
👍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 6 Sep 2019
Was this page helpful?
0 / 5 - 0 ratings

Related issues

jbeckton picture jbeckton  路  3Comments
rwillmer picture rwillmer  路  3Comments
hareeshav picture hareeshav  路  3Comments
hartjo picture hartjo  路  3Comments
rajjejosefsson picture rajjejosefsson  路  3Comments