Question

我有一个简单的应用程序使用Angular 2和Webpack 2，使用sass for templates和angular2-template-loader所以我可以使用templateUrl和styleUrls而不是require 1}}在我的组件中。

现在我想要一个单独的 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'

我需要＆＃39; raw＆＃39;使用angular2-template-loader正确加载模板。我以为我可以使用一个单独的＆＃39; sass＆＃39;我要分离的文件的扩展名并使用＆＃39; extract-text-webpack-plugin＆＃39;，但我无法让它工作：

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

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

// in plugins:
extractSASS

我也试过'extract' loader。我最接近成功的是添加条目＆＃34; ./ src / main.sass＆＃34;并将其用于装载机：

 { 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", ""]);

好的，通过删除＆＃39; raw＆＃39;更新我让它工作（我认为）。从上面的列表中加载，并在javascript中要求sass文件，如下所示：

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

这是正确的方法吗？我如何使用scss作为扩展程序，而不是让我的角度模板陷入困境，只使用＆＃39; raw＆＃39;并且＆＃39; sass＆＃39;作为装载机？

Answer 1

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

Answer 2

我使用'extract'加载器工作并在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文件和我想要单独创建的文件，我只是在原始加载器中为我们的'角度模板'包含'应用程序目录：

include: /app/,

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

exclude: /app/,

单独的CSS文件与角度2和webpack 2？

2 个答案: