SystemJS impossible de charger scss et css à partir de l'ensemble Webpack

Question

J'ai une application angulaire qui est regroupée via webpack.

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

Voici comment j'importer SCSS dans le module angulaire. L'idée de consommer cette application angulaire dans un autre projet, qui utilise JSPM. J'ai pu charger le module angulaire, mais systemJS n'est pas capable de charger scss et css à partir de app.bundle.js

De plus, ma configuration systemJs utilise "css": "github:systemjs/plugin-css@0.1.33",, si cela peut vous aider.

Vous ne savez pas ce que je manque? J'apprécierais vraiment toute aide ou pensée.

Answer 1

L'a inventé. Adopté une approche différente, en utilisant umd au lieu de commonJS et groupé css dans un fichier .css séparé. Voici ma configuration de mise à jour.

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