SystemJS 无法从 webpack 包中加载 scss 和 css

Question

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

这是我的 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 应用程序的想法。我能够加载 angular 模块，但是 systemJS 无法从 app.bundle.js

加载 scss 和 css

此外，我的 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'
   }

SystemJS 无法从 webpack 包中加载 scss 和 css

SystemJS unable to load scss and css from webpack bundle

angular

typescript

webpack

systemjs

jspm