SystemJS unable to load scss and css from webpack bundle

Question

I have an angular app which is bundled through webpack.

Here is my Webpack.config

module.exports = {
entry: {
    app: './src/app.module.ts',
    mock: './test/mocks/mocks.ts'
},
output: {
    path: __dirname + '/dist',
    filename: '[name].bundle.js',
    libraryTarget: 'commonjs',
    sourceMapFilename: '[name].bundle.js.map'
},
resolve: {
    extensions: ['.ts', '.js']
},
module: {
    loaders: [
        {
            test: /\.ts$/,
            use: [
                { loader: 'awesome-typescript-loader' },
                { loader: 'tslint-loader', options: { emitErrors: true, failOnHint: true, rulesDirectory: './node_modules/tslint-microsoft-contrib' } }]
        },
        {
            test: /\.css$/,
            use: ['style-loader', 'css-loader']
        },
        {
            test: /\.html$/,
            loader: "raw-loader"
        },
        {
            test: /\.scss$/,
            use: [{
                loader: "style-loader" // creates style nodes from JS strings
            }, {
                loader: "css-loader", // translates CSS into CommonJS
                options: {
                    sourceMap: true
                }
            }, {
                loader: "sass-loader" // compiles Sass to CSS
            }]
        },
        {
            test: /\.(eot|woff|woff2|ttf|svg|png|jpg)$/,
            loader: 'url-loader?limit=30000&name=[name]-[hash].[ext]'
        }
    ],
},
devtool: 'source-map'
}

Here is how I import scss in to angular module.

import 'app.scss';

The idea to consume this angular app in another project, which uses JSPM. I was able to load the angular module, but systemJS is not able to load scss and css from app.bundle.js

Also, my systemJs config uses "css": "github:systemjs/[email protected]",, if that helps.

Not sure, what I am missing? I would really appreciate any help or thought.

Answer 1

Figured it. Took a different approach, using umd instead of commonJS and bundled css into separate .css file. Here is my update config.

var ExtractTextPlugin = require("extract-text-webpack-plugin"); 
module.exports = {
entry: {
    app: './src/app.module.ts',
    mock: './test/mocks/mocks.ts'
},
   plugins: [
    new ExtractTextPlugin('app.css')
],
output: {
    path: __dirname + '/dist',
    filename: '[name].bundle.js',
    libraryTarget: 'commonjs',
    sourceMapFilename: '[name].bundle.js.map'
},
resolve: {
    extensions: ['.ts', '.js']
},
module: {
    loaders: [
        {
            test: /\.ts$/,
            use: [
                { loader: 'awesome-typescript-loader' },
                { loader: 'tslint-loader', options: { emitErrors: true, failOnHint: true, rulesDirectory: './node_modules/tslint-microsoft-contrib' } }]
        },
   {
            test: /\.scss$/,
            loader: ExtractTextPlugin.extract({
                fallback: 'style-loader',
                use: 'css-loader!sass-loader'
            })
        },
        {
            test: /\.css$/,
            loader: ExtractTextPlugin.extract({
                fallback: 'style-loader',
                use: 'css-loader'
            })
        },
        {
            test: /\.(eot|woff|woff2|ttf|svg|png|jpg)$/,
            loader: 'url-loader?limit=30000&name=[name]-[hash].[ext]'
        }
    ],
},
devtool: 'source-map'
   }