SystemJS无法从Webpack捆绑包加载scss和css

Question

我有一个通过webpack捆绑的角度应用程序。

这是我的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'
}

这是我将scss导入angular模块的方法。

import 'app.scss';

在另一个使用JSPM的项目中使用此角度应用程序的想法。 我能够加载angular模块，但是systemJS无法从app.bundle.js加载scss和css

另外，如果有帮助，我的systemJs配置使用"css": "github:systemjs/[email protected]", 。

不确定，我缺少什么？ 我将不胜感激任何帮助或想法。

Answer 1

想通了。 采用了另一种方法，使用umd而不是commonJS并将css捆绑到单独的.css文件中。 这是我的更新配置。

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'
   }