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:``
})