Integrate Sass in Angular2 - webpack

问题

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

回答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)

回答2:

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')]

来源：https://stackoverflow.com/questions/39147082/integrate-sass-in-angular2-webpack

标签

angular

Sass

gulp

Webpack

angular-cli