2

我希望能够在我的一个条目块（称为“供应商”）中导入 CSS，并使用 ExtractTextPlugin 将其提取到“vendor.css”文件中。

同时，我还寻求能够在动态导入的块中导入任意 CSS（使用 ES6 的import()函数）。

我不能让两者都工作：

{
        test: /\.css$/,
        // do not apply the ExtractTextPlugin in the app folder
        exclude: [helpers.root("app"), helpers.root("node_modules")],
        use: ExtractTextPlugin.extract({
            fallback: "style-loader",
            use: {
                loader: "css-loader",
                options: {
                    minimize: CSSNANO_MINIMIZE_OPTIONS
                }
            }
        })
    },
    {
        test: /\.css$/,
        // only apply these to Components in the app folder
        include: [helpers.root("app"), helpers.root("node_modules/@swimlane/ngx-charts")],
        use: [
            "to-string-loader",
            {
                loader: "css-loader",
                options: {
                    importLoaders: 1, // 1 loader is applied before the css-loader
                    minimize: CSSNANO_MINIMIZE_OPTIONS
                }
            }
        ]
    },
    {
        test: /\.css$/,
        // only apply these to vendor files in the node_modules folder
        include: [helpers.root("node_modules")],
        exclude: [helpers.root("node_modules/@swimlane/ngx-charts")],
        loaders: ["style-loader", {
            loader: "css-loader",
            options: {
                importLoaders: 1, // 1 loader is applied before the css-loader
                minimize: CSSNANO_MINIMIZE_OPTIONS
            }
        }]
    },
    {
        test: /\.scss$/,
        exclude: /node_modules/,
        use: ExtractTextPlugin.extract({
            fallback: "style-loader",
            use: [
                {
                    loader: "css-loader",
                    options: {
                        minimize: CSSNANO_MINIMIZE_OPTIONS
                    }
                },
                "sass-loader"
            ]
        })
    }
}

我的 vendor.ts（入口块之一）如下所示：

import "font-awesome/css/font-awesome.min.css";
import "vendor/bootstrap/bootstrap.scss";

构建后 vendor.css 仅包含 bootstrap 的 CSS，但不包含 font-awesome 的。如果我改为简化配置以将 ExtractTextPlugin 用于除 Angular 4 组件之外的所有内容，我将无法再在代码中动态导入供应商库：

{
        test: /\.css$/,
        exclude: [helpers.root("app")],
        use: ExtractTextPlugin.extract({
            fallback: "style-loader",
            use: {
                loader: "css-loader",
                options: {
                    minimize: CSSNANO_MINIMIZE_OPTIONS
                }
            }
        })
    },
    {
        test: /\.css$/,
        include: [helpers.root("app"), helpers.root("node_modules/@swimlane/ngx-charts")],
        use: [
            "to-string-loader",
            {
                loader: "css-loader",
                options: {
                    importLoaders: 1, // 1 loader is applied before the css-loader
                    minimize: CSSNANO_MINIMIZE_OPTIONS
                }
            }
        ]
    },
    {
        test: /\.scss$/,
        exclude: /node_modules/,
        use: ExtractTextPlugin.extract({
            fallback: "style-loader",
            use: [
                {
                    loader: "css-loader",
                    options: {
                        minimize: CSSNANO_MINIMIZE_OPTIONS
                    }
                },
                "sass-loader"
            ]
        })
    }
}

使用该配置类似于

require("katex/dist/katex.css");
export default require("katex");

我动态导入的内容不起作用，在浏览器中打开我的网站时出现异常。

我的配置有什么问题？

谢谢。

更新：好的，显然它与 ExtractTextPlugin 中的错误有关：https ://github.com/webpack-contrib/extract-text-webpack-plugin/issues/456

4

0 回答 0