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