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

我有一个简单的应用程序，使用Angular 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'

我需要“原始”的模板，以正确加载使用angular2模板加载器。我想我可以为我想要分离的文件使用单独的“sass”扩展名，并使用“extract text 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文件（注释省略）：

好的，通过从上面的列表中删除“raw”加载器，并要求使用javascript中的sass文件，我认为这是成功的：

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

---

这样做对吗？我如何使用

scss

作为扩展，而不让它弄乱我的角度模板，只使用“raw”和“sass”作为加载程序？

看起来是您需要的。

我使用“extract”加载程序使其工作，并在上创建了一个示例。这是我使用的加载器配置，请注意传递给css加载器的

-url

使其忽略

url（）

，因此它不会尝试处理字体，因为我想自己处理这些字体：

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

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

include: /app/,

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

exclude: /app/,

---

他尝试了ExtractTextWebpackPlugin，但配置失败。这就是问题所在。

exclude: /app/,