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

Question

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

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

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

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

Answer 1

可以针对特定模块请求覆盖加载程序：

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

或者可以为不同的条件定义不同的加载器：

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']
        },
    ...