Question

我希望能够在我的一个输入块（称为＆＃34; vendor＆＃34;）中导入CSS，并使用ExtractTextPlugin将其解压缩到＆＃34; vendor.css＆＃34;文件。

同时我还寻求能够在动态导入的块中导入任意CSS（使用ES6＆＃39; 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＆＃s。如果我简化我的配置以使用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

Webpack：提取供应商块中断动态导入（）

0 个答案: