Integrate Sass in Angular2 - webpack

Question

I created a new angular2 project using the angular CLI(@1.0-webpack.2).

I would like to integrate Sass with my project.

I know that:

I can use gulp for this
it's possible to include SCSS in ng2 components

What I'd preffer is to have a specific directory for .scss files which should be 'watched' and compiled once they change, like .ts files after ng serve(terminal).

Thank you

score 1 · Accepted Answer · answered Aug 25 '16 at 16:08

1

At this moment (Aug 25th) this is not possible, but it will be possible with the next release of the angular-cli.

In the angular-cli.json file there will be a property names styles which will be an array of paths to style files which when referenced will be included in your application.

You can see me demo this feature in this webinar (starting around the 12 minute mark)

answered Aug 25 '16 at 16:08

Brocco

62,737
12
70
76

Since the new "@angular/cli" has been released, is there a official tutorial? – Marian07 Apr 21 '17 at 14:13
Probably like this: https://stackoverflow.com/questions/36220256/angular2-angular-cli-sass-options/41541042#answer-39816365 – Marian07 Apr 21 '17 at 14:28

score 0 · Answer 2 · answered Aug 25 '16 at 16:01

You should move index.html to dist. If you want to incorporate the scss build into your webpack build, add the following to your webpack config:

{
    output: {
        filename: './dist/[name].js'
    },

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

    plugins: [
        new ExtractTextPlugin('./styles.css')
    ]
};

You can then include scss files in ng2 components with styles: [require('path-to-scss')]

Integrate Sass in Angular2 - webpack

2 Answers2

Linked