带有 Angular 2 和 webpack 2 的单个单独的 CSS 文件？

我有一个使用 Angular 2 和 Webpack 2 的简单应用程序，使用 sass 作为模板和 angular2-template-loader，这样我就可以使用templateUrl and styleUrls而不是使用require在我的组件中。

现在我想要一个separate我可以直接在我的页面上链接到 css 文件。这将使用 sass 并包括 bootstrap 和 bootswatch。我希望它是分开的，这样我的页面就可以在角度引导之前显示相同样式的内容。这是我的装载机：

{ test: /\.ts$/, loaders: ['awesome-typescript-loader', 'angular2-template-loader'] },
{ test: /\.html$/, loader: 'raw' }, // for templates, need 'raw'
{ test: /\.css$/, loader: 'raw', exclude: /node_modules/ }, // for templates, need 'raw'
{ test: /\.scss$/, loaders: ['raw', "sass"] }, // for templates, need 'raw'

我需要“原始”模板才能使用 angular2-template-loader 正确加载。我想我可以为我想要分离的文件使用单独的“sass”扩展名并使用“extract-text-webpack-plugin”，但我无法让它工作：

var extractSASS = new ExtractTextWebpackPlugin('[name].css');

// in loaders:
{ test: /\.sass$/, loader: extractSASS.extract(['style', 'css', 'sass']) }

// in plugins:
extractSASS

我也尝试过“提取”加载程序 https://github.com/peerigon/extract-loader。我最接近成功的方法是添加条目“./src/main.sass”并将其用于加载程序：

 { test: /\.sass$/, loaders: [
        {
            loader: 'file',
            query: {
                name: '[name].css'
            }
        },
        'extract',
        'raw',
        'css',
        'sass'
    ] 
}

但这会生成一个 javascript 文件（省略注释）：

exports = module.exports = require("./../node_modules/css-loader/lib/css-base.js")();
exports.push([module.id, "h1 {\n  background-color: #333; }\n", ""]);

好的，更新后，我通过从上面的列表中删除“原始”加载器并要求 javascript 中的 sass 文件来使其工作（我认为），如下所示：

var x = require('./main.sass');

这是正确的方法吗？我怎样才能使用scss作为扩展，而不是让它弄乱我的角度模板，只使用“raw”和“sass”作为加载器？

好像提取文本插件 https://github.com/webpack/extract-text-webpack-plugin就是你所需要的。