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

Question

我有一个使用 Angular 2 和 Webpack 2 的简单应用程序，使用 sass 模板和 angular2-template-loader 所以我可以使用 templateUrl 和 styleUrls在我的组件中使用 require。

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

{ 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

我也试过 '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”作为加载程序的 Angular 模板？

Answer 1

看起来像Extract Text Plugin正是您所需要的。