當從 scss 編譯的 css 文件中的行數過多時，如何使 weback sass 加載程序在 Angular 應用程序中有效工作？

Question

我正在 scss 中編寫一個實用程序 class ，它編譯成巨大的 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')]
        }

Answer 1

您可以使用 PurgeCSS package 在您的應用程序構建之后從您的 css 文件中刪除未使用的 css。

安裝 PurgeCSS package。

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 文件生成為 output。 css 在 memory 中處理，因此這在開發模式下不起作用。

參考：- https://purgecss.com/