.scss files not processed from index.html #1787

PiusNyakoojo · 2016-08-21T07:28:49Z

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
angular-cli@1.0.0-beta.11-webpack.2

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

cport1 · 2016-08-21T20:03:22Z

can you copy and paste your component code?

deebloo · 2016-08-21T21:49:59Z

@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 · 2016-08-21T21:50:45Z

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

keithmichelson · 2016-08-22T04:16:32Z

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

sirajc · 2016-08-22T09:22:09Z

see #1459

PiusNyakoojo · 2016-08-22T17:12:26Z

@sirajc Thanks.

This PR addresses my concern: #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
    }
  ],

kennyrulez · 2016-08-24T15:39:38Z

Hello,
sorry to comment an already closed issue, but I need to clarify myself with.
My config OS: Windows 10 node: 6.3.1 angular-cli@1.0.0-beta.11-webpack.2

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!

PiusNyakoojo · 2016-08-24T16:02:25Z

@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

kennyrulez · 2016-08-25T09:25:01Z

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

Kosmonaft · 2016-08-26T06:25:59Z

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?

martoncsikos · 2016-08-26T07:22:15Z

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

angular-automatic-lock-bot · 2019-09-06T02:41:35Z

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

PiusNyakoojo closed this as completed Aug 22, 2016

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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

.scss files not processed from index.html #1787

.scss files not processed from index.html #1787

PiusNyakoojo commented Aug 21, 2016 •

edited

Loading

cport1 commented Aug 21, 2016

deebloo commented Aug 21, 2016

deebloo commented Aug 21, 2016

keithmichelson commented Aug 22, 2016 •

edited

Loading

sirajc commented Aug 22, 2016

PiusNyakoojo commented Aug 22, 2016

kennyrulez commented Aug 24, 2016

PiusNyakoojo commented Aug 24, 2016 •

edited

Loading

kennyrulez commented Aug 25, 2016

Kosmonaft commented Aug 26, 2016

martoncsikos commented Aug 26, 2016

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

.scss files not processed from index.html #1787

.scss files not processed from index.html #1787

Comments

PiusNyakoojo commented Aug 21, 2016 • edited Loading

Bug Report

Expected Behavior

Actual Behavior

Reproduction

Version details:

cport1 commented Aug 21, 2016

deebloo commented Aug 21, 2016

deebloo commented Aug 21, 2016

keithmichelson commented Aug 22, 2016 • edited Loading

sirajc commented Aug 22, 2016

PiusNyakoojo commented Aug 22, 2016

kennyrulez commented Aug 24, 2016

PiusNyakoojo commented Aug 24, 2016 • edited Loading

kennyrulez commented Aug 25, 2016

Kosmonaft commented Aug 26, 2016

martoncsikos commented Aug 26, 2016

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

PiusNyakoojo commented Aug 21, 2016 •

edited

Loading

keithmichelson commented Aug 22, 2016 •

edited

Loading

PiusNyakoojo commented Aug 24, 2016 •

edited

Loading