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

Question

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

我明白了style-loader和to-string-loader的区别，前者在DOM上加上了CSS，后者为Angular创建了一个字符串数组2 通过 styles 属性.

消费

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

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

Answer 1

特定模块请求的加载器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']
        },
    ...

在 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

css

webpack-style-loader

webpack-2

angular