当从 scss 编译的 css 文件中的行数过多时,如何使 webpack sass 加载器在 Angular 应用程序中有效工作?

分享于2022年07月17日 angular css sass webpack webpack-dev-server 问答
【问题标题】:当从 scss 编译的 css 文件中的行数过多时,如何使 webpack sass 加载器在 Angular 应用程序中有效工作?(How to make weback sass loader work efficiently in Angular application when number of line are too much in compiled css file from scss?)
【发布时间】:2022-01-25 13:28:34
【问题描述】:

我正在 scss 中编写一个实用程序类,它编译成巨大的 css 文件,这会导致我的 Angular 应用程序变慢甚至有时甚至停止。谁能建议我如何在 webpack 中处理这个问题?

这是我的 scss,它生成了一个巨大的 css 文件

// margin and padding for all directions
@for $top from 0 through 100 {
    @for $right from 0 through 100 {
        @for $bottom from 0 through 100 {
            @for $left from 0 through 100 {
                .p-#{$top}-#{$right}-#{$bottom}-#{$left} {
                    padding: #{$top}px #{$right}px #{$bottom}px #{$left}px;
                }

                .m-#{$top}-#{$right}-#{$bottom}-#{$left} {
                    margin: #{$top}px #{$right}px #{$bottom}px #{$left}px;
                }
            }
        }
    }
}

此代码将创建这个巨大的 css 文件,请参考任何在线 scss 到 css 转换器

https://www.cssportal.com/scss-to-css/

这是我处理 scss 加载器的 webpack 文件代码。

        {
            test: /\.scss$/,
            use: ['style-loader', 'css-loader', 'sass-loader'],
            include: [helpers.root('src', 'styles')]
        }


【解决方案1】:

您可以使用 PurgeCSS 包,它会在构建应用程序后从您的 css 文件中删除未使用的 css。

安装 PurgeCSS 包。

npm install purgecss

然后在你的 package.json 文件中添加以下命令

"postbuild": "npm run purgecss",
"purgecss": "purgecss --css dist/*.css --content dist/index.html dist/*.js -o dist/"

Tailwind CSS 使用这个库来做同样的事情,因为它也是一个基于实用程序的库。

注意:- 请注意,这在开发模式下不起作用。在开发模式下,没有生成 css 文件作为输出。 css 在内存中处理,因此这在开发模式下不起作用。

参考:- https://purgecss.com/

  • 感谢您的回复,但问题是我的 webpack 开发服务器甚至无法将其转换为 css,这会导致内存已满问题,当我将循环从 100 减少到 20 或 10 时然后它编译得非常好,应用程序响应非常慢,可以通过您提供的解决方案来解决。
  • 我已经更新了答案,请检查。在开发模式下无法处理您的用例。