search

vercel / next.js

The React Framework
https://nextjs.org
MIT License
122.65k stars 26.25k forks source link

Changes to postcss.config.js do not take effect immediately after dev server restart #39410

Open ozzy1136 opened 1 year ago

ozzy1136 commented 1 year ago

Verify canary release

Provide environment information

Operating System: Platform: win32 Arch: x64 Version: Windows 10 Home Binaries: Node: 16.16.0 npm: N/A Yarn: N/A pnpm: N/A Relevant packages: next: 12.2.5-canary.0 eslint-config-next: N/A react: 18.2.0 react-dom: 18.2.0

What browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

next dev

Describe the Bug

On initial next dev, the source CSS files are processed as expected with the postcss.config.js configuration. This is evident by looking at the computed styles in devtools. After making and saving changes to postcss.config.js and restarting the dev server, the computed styles do not reflect the changes made to the config file. After saving a CSS file in a text editor, without even making changes to the file, and Next.js finishes compiling, usually the computed styles reflect the changes made to postcss.config.js (i.e. the source CSS file is processed as expected with the updated config file). Additionally, only that CSS file is processed with the updated postcss.config.js configuration; any other CSS file would have to be saved to update the computed styles.

Expected Behavior

After making changes to postcss.config.js and restarting the dev server, the output CSS should be processed with the updated PostCSS config file.

Link to reproduction

https://github.com/ozzy1136/next.js-postcss-config-test

To Reproduce

  1. Run git clone https://github.com/ozzy1136/next.js-postcss-config-test.git
  2. Run cd next.js-postcss-config-test
  3. Run npm install
  4. Run npm run dev
  5. Open web browser and inspect styles of <div> with class testDiv
  6. Close the running dev server with ^C
  7. Open postcss.config.js and change the value of "display-two-values" from true to false
  8. Save postcss.config.js
  9. Run npm run dev
  10. After compiling and page reload, save pages/test.module.css in text editor to process with updated PostCSS config file
w55100 commented 1 year ago

We encountered same issue. run start can read the real-time config file, whereas run dev keeps old params in postcss.config.js. We tried to yarn remove next-server and reinstall it with yarn add next-server, then latest config become effective. It seems that next-server keeps config cache itself.

tangye1234 commented 1 year ago

You can remove .next/cache manually to make this change working immediately