单个独立CSS文件与角2和webpack 2？

Question

我有一个简单的应用程序与角2和Webpack 2，使用sass的模板和angular2模板加载程序，所以我可以使用templateUrl和styleUrls，而不是在我的组件中使用require。

现在我想有一个独立的css文件，我可以直接链接到我的页面。这将使用sass并包括引导和引导。我希望它是分开的，这样我的页面就可以在角引导之前以相同的样式显示一些东西。这是我的装载机：

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

我需要'raw‘为模板正确加载使用angular2模板加载程序。我想我可以用一个单独的'sass‘扩展名来处理我想要分离的文件，并使用’提取-文本-webpack-插件‘，但我无法让它工作：

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

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

// in plugins:
extractSASS

我也尝试过“提取”装载机。我最接近成功的方法是添加条目"./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", ""]);

好的，通过将“raw”加载程序从上面的列表中删除，并要求javascript中的sass文件如下所示，更新了它(我认为)。

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

这样做对吗？我怎么能使用scss作为扩展，而不让它破坏我那些只使用“raw”和“sass”作为加载器的角度模板呢？

Answer 1

我使用“提取”加载器让它工作，并在github上创建了一个示例。这是我使用的加载程序配置，请注意传递给css加载程序的-url使其忽略url()，这样它就不会尝试处理字体，因为我想自己处理这些字体：

test: /\.scss$/, loaders: [
  {
    loader: 'file',
    query: {
      name: '[name].css'
    }
  }, 'extract', 'css?-url', 'sass' // compile with sass, then css, then extract
]

为了区分我的角模板和我想单独创建的文件的scss文件，我只是‘包括’app目录和我的角模板在它们的原始加载程序中：

include: /app/,

并从将生成css文件的加载程序中排除该目录：

exclude: /app/,

Answer 2

看起来提取文本插件是你所需要的。