how to use sass files

[gmchaturvedi1]

Kindly suggest how to use sass files for creating application

[dotcs]

Currently sass/scss support is not implemented in the project. But webpack makes it easy to do so.

Install sass-loader via npm and register the loader for *.scss files. Add the following somewhere in the module loaders, e.g. below this line:

    {
        test: /\.scss$/,
        exclude: /node_modules/,
        loader: 'style-loader!css-loader!sass-loader'
      },

The sass-loader transformes your scss files into valid css code, which are then consumed by the css-loader and style-loader. For more details see also: https://github.com/jtangelder/sass-loader

[lanocturne]

Still don't get it, @dotcs can you provide an example? I have a 'styles' folder under app. Something like this
app
|-styles
|--main.scss

After installing sass-loader and put above config code at webpack.config. I don't see main.scss gets mapped to css and be loaded in browser.

[asafyish]

In webpack:

{
        test: /\.scss$/,
        exclude: /node_modules/,
        loader: 'raw-loader!sass-loader'
}

Then in your component:

@Component({
  styles: [ require('./filename.scss') ],
})

Angular2 expects a string in the styles array, because it modifies the string to encapsulate the styling. Using style-loader/css-loader loads the css and inject to the html, without encapsulating, and doesn't return a string, raw-loader just load the file as string and pass it to sass-loader, which also return a string.

[liampmccabe]

What about global styles, ones not tied to components?

Using loaders: ["style", "css", "sass"] works but throws errors preventing the app to run.

[PatrickJS]

Please use sass to raw and avoid style-loader unless you want global style support. There's another way to support global styles and still maintain the raw loader. By removing encapsulation in the top-level component and requiring the CSS that should be global.

[liampmccabe]

If anyone else was a little confused to what @gdi2290 suggested:

import {ViewEncapsulation} from 'angular2/core';

@Component({
  selector: 'app',
  styles: [
    require('bootstrap.scss')
  ],
  encapsulation: ViewEncapsulation.None,
  template: ``
})
class App {}

[manavsehgal]

Opened #199 to consolidate these issues.

[gonzofish]

@liampmccabe thanks for the heads-up. I was confused 😉

[PatrickJS]

I created a scss wiki page if anyone wants to update it to be more clear
https://github.com/AngularClass/angular2-webpack-starter/wiki/How-to-include-SCSS-in-components

[dvh91]

@gdi2290 - Is it possible to override bootstrap variables along with the implementation from your wiki?

[mburger81]

@gdi2290 your wiki page works fine,

if you import in your sass file other css files you have the problem with the relative URLs in your CSS files. The avoid that do this

https://github.com/bholloway/resolve-url-loader#

in webpack.config.js do this

// SASS loader
{ test: /\.scss$/, 
  exclude: /node_modules/,  
  loaders: ['raw-loader', 'sass-loader', 'resolve-url']
}

@gdi2290
I don't like at all load my scss file in top level component by styles and encapsulation. Isn't there a possibility to load the compiled CSS file in the index.html file?

thx
Michael

[PatrickJS]

@mburger81 you can import it as you normally would using the embedded stylesheets(see https://webpack.github.io/docs/stylesheets.html) then in your app.ts you would have

require("./app.scss");

@Component({
  selector: 'app',
  template:``
})

[akeating]

There are cases where you need global styles and also enjoy the benefits of encapsulated styles in components. I have adopted a policy of naming component sass files so they end with component.scss. Webpack can then choose the right loader chain like this:

{ test: /^(?!.*component).*\.scss$/, loaders: ['style', 'css', 'resolve-url', 'sass'] },
{ test: /\.component\.scss$/, loaders: ['raw', 'resolve-url', 'sass'] },

Of course, be sure to create a common or global entry point containing your global styles and load it in before your bundle containing angular so the css can be applied in the correct order.

[IAMtheIAM]

@akeating Can you explain what you mean, in a different way? I don't quite understand what the benefit of having both of those loaders is. I would like to use global styles as well as encapsulated styles too. Also, can you give an example of your .scss file names to help clarify? Thanks.

[MFateen]

Hey guys, my sass is working perfectly with my components, but I can't make it work with karma. what should I do?

[sliker]

@mburger81 that doesn't works, and 'resolve-url' should go before sass-loader, webpack loaders are loaded from right to left, so resolve-url fail with sass rules (however after change it to the correct way it doesn't work), the builded css leaves the url like the sass and file-loader (I use it) don't copy the assets.

[scottmahr]

I have sass working. I have a bootstrap.scss that I load as a global style, and then other styles for each component. The only issue now is that when I put variables in my component style sheets that I define in my global style they don't work.

Any ideas about how to get it all to work?

Thanks!

Scott

[akeating]

@scottmahr perhaps break your variables into a separate common file _variables.scss and import it as needed at the top of your component similarly to the way bootstrap does (obviously the path will be different):

// Core variables and mixins
@import "variables";
@import "mixins";

[slavik57]

raw!sass pipe works fine for me but when I use UglifyJS plugin it breaks the styles...
I have opened a question on stack overflow, you can see more details there.

[rjmarques]

@akeating I've tried using your proposal for encapsulated styles in components

{ test: /\.component\.scss$/, loaders: ['raw', 'resolve-url', 'sass'] }

However, it's not resolving my url() paths. The final CSS simply has the same path as defined in the component's sass code.

Is there some additional config to go along with this?

[akeating]

@rjmarques check that your sass loader is configured to generate source maps (details https://github.com/bholloway/resolve-url-loader).

[rjmarques]

Changed it to

{ test: /\.component\.scss$/, loaders: ['raw', 'resolve-url', 'sass?sourceMap'] }

Still not working.

So far the only way I've been able to have the _url()_s working correctly was with

{ test: /\.component\.scss$/, loaders: ['exports-loader?module.exports.toString()', 'css', 'sass'] }

Sourced from here.

[akeating]

It's hard to say what your issue is exactly. I use resolve-url in conjunction with url-loader to setup my assets (file-loader would be fine too). The assets are emitted into the output directory or embedded right in the css file. Any urls are resolved relative to the output directory, which becomes your webroot. Obviously modify to suit your particular circumstances and build.
{ test: /.(png|woff(2)?|eot|ttf|svg)(\?[a-z0-9=\.]+)?$/, loader: 'url-loader?limit=100000' }.

[akeating]

@rjmarques I reproduced this issue too. It looks like resolve-url-loader had problems with sass-loader#4.0.0, so upgrade to latest resolve-url-loader#1.6.0. This variation including resolve-url, worked as well:

{ test: /\.component\.scss$/, loaders: ['exports-loader?module.exports.toString()', 'css', 'resolve-url', 'sass?sourceMap'] }

[colltoaction]

Maybe follow the Tour Of Heroes?

On Tue, Aug 23, 2016, 13:31 Kingsley Hendrickse notifications@github.com
wrote:

hmm - I'm a bit lost :( - I think I must have done npm install angular2 -
which has given me the latest available npm package of angular2 - which is
the beta.17 - which is from back in April. why has your package.json got so
many different parts of angular some at rc4 and some at rc5 - isn't there a
single npm for the rc versions? - and should I just copy your dependencies
to get mine working?

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
#136 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABeg9FLlLBdQLBVtb-p_ZqiAeICRxVuvks5qiyBHgaJpZM4GsPDM
.

[kingsleyh]

hmm - so far I'm completely underwhelmed with Angular2 - it's so hard to get going and confusing with so much change going on. I think I might go back to Angular1 or React and come back to Angular2 next year when it's more stable

[rjmarques]

Building on the previous comment:

https://angular.io/docs/ts/latest/quickstart.html

[PatrickJS]

@kingsleyh I can pair with you this Saturday to update your project to the latest version so you're not discouraged about Angular2

[kingsleyh]

@rjmarques thanks for the link
@gdi2290 - the main issue I'm struggling with is the testing. Thanks for the offer - If you don't mind that would be awesome.

[abierbaum]

Thanks to @akeating and @gdi2290 for all the advice above. Works great.

Has anyone been able to get scss files loaded this way through styleUrls to work with HMR so only the CSS gets reloaded? (In my testing this works with scss files included at a global scope, but not with ones included with components)

[nbunney]

Hey, I am on the initial release version with the following returned from ng -v
angular-cli: 1.0.0-beta.14 node: 6.6.0 os: darwin x64
I am creating my project with
ng new projectname
The only webpack.config.js files I am seeing are under ./node-modules/... I am a little slow to touch those files. Should I be seeing a copy of this file somewhere else? Do i need to create it? Any help appreciated.

[ryanki1]

@nbunney: with:

• angular-cli: 1.0.0-beta.14
• node: 4.5.0
• os: darwin x64

it just works out of the box:

./semiAutomatic.component.ts

..
@Component({
    selector: "semi-automatic-overview",
    styleUrls: ["./semiAutomaticOverview.scss"],
    templateUrl: "./semiAutomaticOverview.view.html"
})
export class SemiAutomaticOverviewComponent
..

./semiAutomaticOverview.scss

.semiAutomaticOverview {
    color: green;
    .dropdown-menu {
        background-color: green;
        color: yellow;
    }
}

scss styling ends up being written to main.bundle.js as a string of css :-)

[teeSee]

Has any one used scss with ngc? All the lines of @import in component.scss report "Resource not found" error. Any suggestion or work around to make scss work with ngc?

[nbunney]

Nice! Thanks. Absolutely loving Angular2 so far.

[arlowhite]

@teeSee I think all you need for .scss (instead of .sass) is

1st rename styles.sass to styles.scss

Update angular-cli.json

  "styles": [
    "styles.scss"
  ],

  "defaults": {
    "styleExt": "scss",
    "prefixInterfaces": false
  }

[VishalGulati]

I am not able to use variables in my scss file. I have done all configurations as mentioned at: https://github.com/AngularClass/angular2-webpack-starter/wiki/How-to-include-SCSS-in-components. Please see my issue here: #1152 TIA

[rjmarques]

@VishalGulati it will be easier to narrow down the problem if you post the error you're getting

I didn't exactly follow the same config as you posted. However I'm able to use variables: https://github.com/rjmarques/angular2-typescript-recipe/blob/master/public/scss/globals.scss

[tim-csaky-qhr]

hi @rjmarques. I'm wondering if i can use sass variables in an agular 2 component. something like:

@Component({

  selector: 'my-component',

  template: `
    <div>
      <div class="test-div">test div 1</div>
    </div>
  `,

  styles: [
    `
    @import "variables";

    .test-div{
      border: 1px solid $test-color;
    }
  `]

})

my file _variables.scss:

$test-color: green !default;

it seems whatever I try the sass variables arent recognised.
Any help much appreciated.

[rjmarques]

Hey @tim-csaky-qhr =)

The sass used in my simple nav component uses a variable: $sideSpace

The variable is defined in the global's file.

At first glance your example looks fine. I'm not using inline component styling, however. I have files for everything.

What error(s) are you getting? Is your webpack sass loader definition the same/similar to mine?

[colltoaction]

Angular assumes your style is CSS, so it won't work. You need to import it so you trigger thew underlying webpack loading mechanism that compiles your SASS.

…

On Thu, Nov 24, 2016 at 4:39 PM rjmarques ***@***.***> wrote: Hey @tim-csaky-qhr <https://github.com/tim-csaky-qhr> =) The sass used in my simple nav component <https://github.com/rjmarques/angular2-typescript-recipe/blob/master/src/app/shared/header/app-header.component.scss> uses a variable: *$sideSpace* The variable is defined in the global's <https://github.com/rjmarques/angular2-typescript-recipe/blob/master/public/scss/globals.scss> file. At first glance your example looks fine. I'm not using inline component styling, however. I have files for everything. What error(s) are you getting? Is your webpack sass loader definition the same/similar to mine? — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#136 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ABeg9Nq-qYy_0As_4KxjOH6Jz4eVu4LNks5rBef8gaJpZM4GsPDM> .

[tim-csaky-qhr]

hi there @rjmarques and @tinchou
Ahhh I see now!
thanks for your help.
that sounds like a good set-up.

i need to link to the variables from a sass file. so use the styleUrl[].

@Component({

  selector: 'my-component',

  template: `
    <div>
      <div class="test-div">test div 1</div>
    </div>
  `,
  styleUrls: ['local_sass_file.scss'],

})

local_sass_file.scss contains:

// variables:
@import "../../assets/css/variables";

my file global _variables.scss contains:
$test-color: green !default;

now if i can understand the rest of angular2 i'll be all set!

[vquach718]

@kingsleyh , @gdi2290 have you be able fix the issue? I have exact issue with the test like you. Thanks

[gilhanan]

I'm not sure if it's possible, but I wonder if anyone success combined SASS SourceMaps and Angular 2 ViewEncapsulation together

[anselanza]

I followed the exact steps outlined in the Wiki entry (https://github.com/AngularClass/angular2-webpack-starter/wiki/How-to-include-SCSS-in-components) and I just get an error like the compiler is trying to reading comments like they're CSS:

ERROR in ./src/styles/styles.scss
Module build failed:
/* this file will be extracted to main dist folder and is imported in index.html */
^
      Invalid CSS after "...load the styles": expected 1 selector or at-rule, was "var content = requi"
      in /Users/stephen/repos/chanel-elevator-web/src/ipad/src/styles/styles.scss (line 1, column 1)
 @ ./src/app/app.module.ts 16:0-31
 @ ./src/app/index.ts
 @ ./src/main.browser.ts
 @ multi (webpack)-dev-server/client?http://localhost:3000 ./src/main.browser.ts

I'm trying to apply this globally, so my app.component.ts looks like this: (extract)

@Component({
  selector: 'app',
  encapsulation: ViewEncapsulation.None,
  styleUrls: [
    '../styles/styles.scss'
  ],

Am I doing something wrong?

[ryanki1]

"var content = requi" looks like JavaScript.. Use "//" for comments in scss Best regards, Kieran

…

________________________________ From: Stephen Buchanan <notifications@github.com> Sent: Wednesday, February 22, 2017 11:01:57 AM To: AngularClass/angular2-webpack-starter Cc: Kieran Ryan; Comment Subject: Re: [AngularClass/angular2-webpack-starter] how to use sass files (#136) I followed the exact steps outlined in the Wiki entry (https://github.com/AngularClass/angular2-webpack-starter/wiki/How-to-include-SCSS-in-components) and I just get an error like the compiler is trying to reading comments like they're CSS: ERROR in ./src/styles/styles.scss Module build failed: /* this file will be extracted to main dist folder and is imported in index.html */ ^ Invalid CSS after "...load the styles": expected 1 selector or at-rule, was "var content = requi" in /Users/stephen/repos/chanel-elevator-web/src/ipad/src/styles/styles.scss (line 1, column 1) @ ./src/app/app.module.ts 16:0-31 @ ./src/app/index.ts @ ./src/main.browser.ts @ multi (webpack)-dev-server/client?http://localhost:3000 ./src/main.browser.ts I'm trying to apply this globally, so my app.component.ts looks like this: (extract) @component({ selector: 'app', encapsulation: ViewEncapsulation.None, styleUrls: [ '../styles/styles.scss' ], Am I doing something wrong? — You are receiving this because you commented. Reply to this email directly, view it on GitHub<#136 (comment)>, or mute the thread<https://github.com/notifications/unsubscribe-auth/AB_CQsUT0WmlyE_9bdmC3ZlUY41MIaUfks5rfAeVgaJpZM4GsPDM>.

[anselanza]

Ah, I think I resolved it. The starter project includes an additional rule (in webpack.common.js) for scss files:
```
/*
* to string and sass loader support for *.scss files (from Angular components)
* Returns compiled css content as string
*
*/
{
test: /.scss$/,
use: ['to-string-loader', 'css-loader', 'sass-loader'],
exclude: [helpers.root('src', 'styles')]
},

Removing this rule made it work again. Perhaps the Wiki should include mention of this?

[SystemR]

Someone needs to update the wiki entry again since it's no longer working with the current version