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到角模块。

import 'app.scss'; 

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

此外，我的systemJs配置使用"css": "github:systemjs/plugin-css@0.1.33",，如果有帮助。

不知道，我错过了什么？我非常感谢任何帮助或想法。

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