include scss in angular styleUrls

In ng2+, we can include css in the styleUrls on the component level to separate styling into file. In one of our recent project, we have a bunch of scss files to migrate, so we would like to include scss file to avoid major rewrite. We also have some global scss files which will be bundled by webpack withExtractTextPlugin  .

So we basically need 2 rules for scss:

        test: /(main|index).scss$/,
        loader: ExtractTextPlugin.extract({
          fallbackLoader: "style-loader",
          loader: "css-loader!sass-loader",
        test: /\.scss$/,
        loader: ["raw-loader", "sass-loader",
            loader: 'sass-resources-loader',
            options: {
              resources: ['./styles/global/_common.scss', './styles/global/_mixins.scss']
        // main scss will be handled by css/sass loader then ExtractTextPlugin then to the bundle css file.
        exclude: [helpers.root('styles/main.scss'), helpers.root('node_modules/header-footer/styles/index.scss')]

If we use css-loader rather than raw loader for other scss files, then we get error message: Error: Uncaught (in promise): Expected 'styles' to be an array of strings..

The sass-resources-loader loader is helpful because it would make the shared commons/mixins available for all components so that we do not have to import them in each component to make the scss compilable.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s