Fix CI Build Failure - postcss-loader SCSS Error

Context

The CI build (test-build-package job) fails because postcss-loader is in the webpack SCSS processing chain but there's no postcss.config.js. When postcss receives the SCSS content, it fails to parse SCSS-specific syntax (like // comments) as CSS, causing the build to error out.

The error from the CI log:

SyntaxError (1:1) /workspace/p-lao/bl-consultores-ds/src/components/Button/Button.scss Unknown word //

Root Cause

In webpack.config.ts, the SCSS rule chain is:

style-loader → postcss-loader → css-loader → sass-loader

sass-loader compiles SCSS → CSS, but postcss-loader is placed BEFORE css-loader in the chain, meaning it receives the raw SCSS output from sass-loader but without a config file, it fails to parse it.

Fix

Remove postcss-loader from the SCSS processing chain in webpack.config.ts. The sass-loader already compiles SCSS to CSS, and postcss is not needed for this project (no postcss.config.js exists, and Tailwind v4 handles CSS processing differently).

File to modify: `webpack.config.ts`

Remove the postcss-loader entry from the SCSS rule's use array. The chain should go:

style-loader → css-loader → sass-loader

Steps

Edit webpack.config.ts — remove the postcss-loader block from the SCSS rule
Commit and push to the agente-button-ds branch
CI should pass after push

Verification

After pushing, verify on Gitea that:

test-build-package job succeeds (build step)
unit-front-end-testing passes
cypress-components-testing passes

1.6 KiB Raw Blame History