在 Webpack 2 中使用 style-loader 加载一些 CSS，使用 to-string-loader 加载一些 CSS答案

【问题标题】：Load some CSS with style-loader and some CSS with to-string-loader in Webpack 2在 Webpack 2 中使用 style-loader 加载一些 CSS，使用 to-string-loader 加载一些 CSS
【发布时间】：2017-03-20 03:24:47
【问题描述】：

我正在开发一个 Angular 2 应用程序，目前正在尝试使用 Webpack 2 构建它（这是我第一次涉足 Webpack）。

我了解style-loader 和to-string-loader 之间的区别，前者将CSS 添加到DOM，后者通过styles 属性创建一个字符串数组供Angular 2 使用。

我的问题是，我可以两者兼得吗？或者换一种说法，如果我在文件site.css 中有全局样式，那么在不改变组件样式（to-string-loader、css-loader）的行为的情况下将它们与 Webpack 捆绑在一起的正确方法是什么？

仅在 main.ts 中要求或导入它们似乎不足以让 Webpack 弄清楚要做什么。

【问题讨论】：

标签： css angular webpack-style-loader webpack-2

【解决方案1】：

Loaders can be overridden 用于特定模块请求：

require("!!style!css!./global-styles/site.css");

或者不同的加载器can be defined for different conditions:

module: {
    loaders: [
        {
            test: /\.css$/,
            include: [path.resolve(__dirname, "global-styles")],
            loaders: ['style', 'css']
        },
        {
            test: /\.css$/,
            exclude: [path.resolve(__dirname, "global-styles")],
            loaders: ['to-string', 'css']
        },
    ...

【讨论】：