43 lines
1.6 KiB
Markdown
43 lines
1.6 KiB
Markdown
# 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
|
|
1. Edit `webpack.config.ts` — remove the `postcss-loader` block from the SCSS rule
|
|
2. Commit and push to the `agente-button-ds` branch
|
|
3. 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
|