The example "with-external-scoped-css" works randomly

[anacicconi]

Context

I need to use external sass stylesheets so I decided to follow the "with-external-scoped-css" example. However, the behavior is quite strange. The first time I launch the project it creates a static folder and I have my css working. If I try to make changes and run the project again nothing happens the most part of the time. Sometimes the static folder is re-created but it's really random.

Steps to Reproduce

1. Go to the "with-external-scoped-css" project

2. npm install && npm run start

Result: you may have a static folder and the css must work.

3. change the font-size in the index.sass file

4. npm run start

Result: nothing happens

5. try to delete the .next folder and the static folder

6. start the whole process again (npm install && npm run start)

Result: sometimes the static folder is re-created and sometimes it isn't

Expected Behavior

1. npm install && npm run start

Result: the static folder should be created and the css should be working

2. change the font-size in the index.sass file

3. npm run start

Result: the css changes

Your Environment

Mac OS 10.11.6
node v8.6.0
npm 5.3.0

[stevegeek]

Yes I have found I need to clear the npm cache ./node_modules/.cache any time I want the CSS to be rebuilt, not really a viable option. Im assuming this is because babel caches things there and wont rebuild the assets most of the time

[adisak1618]

Yes i think it about the cache but if you change the name of you style in both scss and js it will work fine. Other problem would be how to do hot reload TT

[Kyle-Mendes]

I was able to get reliable builds when running next with "dev": "rm -rf ./node_modules/.cache/babel-loader && next"

However, this definitely seems to require me to restart next everytime I make a change to stylesheets, which is obviously less than ideal. It'd be great if someone could point me to a reliable solution to ensuring the css file is rebuilt on change.

[sheerun]

Potential solution: #3364

[etodanik]

Getting the same behavior.. Used @Kyle-Mendes solution but it really does require to restart every time styles are changed.

[sheerun]

The work-around in my case was to put extracted stylesheets in directory outside .next for development in inside .next for production. #3451