webpack - 样式达到 10000 个字符时被切断

Question

我正在尝试使用 webpack 将引导 css 加载到我的应用程序中。这是一个大项目，我们的引导文件是定制的，所以我们不能再从 NPM 加载它了。我们正在尝试从 gulp 迁移它。

我正在main.sass使用 @import 将其导入。 @import '../vendor/bootstrap/css/bootstrap.css';

我在我的 webpack 中使用以下配置：

module: {
        rules: [
            {
                test: /\.(s*)css$/,
                use: ['style-loader', 'css-loader', 'sass-loader']
            }
        ]
    }

当我检查浏览器中加载的 HTML 时，我的 bootstrap.css 文件已加载到标签内，但奇怪的是，它恰好以 10,000 个字符结尾。所以大部分 BS css 规则都被切断了。

我在 Google 上找不到帮助，也没有 webpack、style-loader、css-loader 文档和问题。

任何人都知道如何克服这个问题？

设置：

网络包 4.33.0

引导程序 3.3.7

CSS加载器2.1.1

样式加载器 0.23.1

萨斯加载器 7.1.0

标签： webpackwebpack-style-loader

Answer 1

我发现样式在那里，但 chrome 并没有显示所有代码。由于某种原因，它只显示 10.000 个字符。

但是，如果我将内容复制到样式标签并将其扔到 VSCode 上，我所有的 CSS 都在那里。

此外，如果在控制台上选择元素，我可以检查字符长度是否正确。