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

【问题标题】：Single separate CSS file with angular 2 and webpack 2?带有 angular 2 和 webpack 2 的单个单独的 CSS 文件？
【发布时间】：2016-12-20 17:22:07
【问题描述】：

我有一个使用 Angular 2 和 Webpack 2 的简单应用程序，使用 sass 作为模板和 angular2-template-loader，因此我可以在我的组件中使用 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 正确加载。我想我可以为要分离的文件使用单独的“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文件（省略cmets）：

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 webpack

【解决方案1】：

看起来Extract Text Plugin 是你需要的。

【讨论】：

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

【解决方案2】：

我使用“提取”加载程序让它工作，并在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/,

【讨论】：