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はscssとcssをロードできません。app.bundle.js

また、私のsystemJs configは"css": "github:systemjs/plugin-css@0.1.33",を使用しています。

わからないことは何ですか？私は本当に助けや考えを感謝します。

Answer 1

それを見てください。 commonJSの代わりにumdを使用し、別の.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' 
    }