angular 2和webpack 2的单独CSS文件

Question

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

现在我想有一个单独的 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正确加载模板的'raw'。我想我可以为我想要分离的文件使用单独的'sass'扩展名，并使用'extract-text-webpack-plugin'，但我不能让它工作:

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作为扩展，而不是让它搞砸我的角模板，只是使用"原始"one_answers"sass"作为加载器?

Answer 1

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

Answer 2

我使用'extract'加载器让它工作，并在github上创建了一个示例。这是我使用的加载器配置，注意-url传递给css加载器，使其忽略url()，因此它不会尝试处理字体，因为我想自己处理这些:

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

为了区分我的angular模板的scss文件和我想单独创建的文件，我只需要在原始加载器中"包含"带有angular模板的app目录:

include: /app/,

并从将生成css文件的加载器中排除该目录:

exclude: /app/,