Question

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

我理解style-loader和to-string-loader之间的区别，前者将CSS添加到DOM，后者为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']
        },
    ...

使用样式加载器加载一些CSS，并在Webpack 2中加载一些带有to-string-loader的CSS

1 个答案: