Netlify does not load customed CSS when deploy Vuepress blog

Hope you have a nice day.

I’m using a theme (vuepress-theme-gungnir) to make a little blog with Vuepress. Now I have finished personal edition to custom this theme.

Everything run perfectly at local (in dev mode, which I use npm run docs:dev), as well as after I run npm run docs:build, I also get a perfectly static files which is all custommed.

But after deploy to netlify, all my customs seems disappear. It only appear with original gungnir theme. The same thing happen with vercel. Other code in some *.vue files also disappear.

I have been looking for many ways to figure it out, have tried many time to fix it, but there are very less information and it’s not fixed at all. So I decide to ask you here with a hope.

You can clone my repo here https://github.com/DWSpace/dws-blog.git to run local to see the difference.

Deployd on Netlify: https://glowing-biscotti-276c40.netlify.app/

I am very appreciate your help. Thank you so much.

I am sorry but pls give me a help

is it needed to deploy first and then upload static file with netlify OR we can you netlify to deploy?
Netlify’s still deploy with raw code even I have not build static file first.

Hi @macon157

What is the difference between what you see locally, and what you see when deployed? Can you provide images to illustrate the differences?

I don’t see any difference between the local dev and site deployed on Netlify.

Thank you for your reply @coelmay .

This is how it looks like when running locally

This is how it looks like when deployed on netlify

This is what I see when running npm run docs:dev

This is what I see after running npm docs:build

And I see the same deployed to Netlify https://zippy-semifreddo-4826b6.netlify.app

Thank alot for your time @coelmay
But it’s so strange. It’s mean my code on git repo does not change even editted (with me), but I dont know why other access make it return to original code (base on your picture).

Please help me make a small check at:
\dws-blog\node_modules\vuepress-theme-gungnir\lib\client\styles\layouts\home.scss

The long text below the word D Writing Space break the box because the original css code have the property: white-space: nowrap;
But we see this row when open dev mode on browser.

But my code’ve shown that it’s edited, which is disappear.
asdsdadas

It’s still here on the browser

I dont know why my code changes is all appied when running locally, but it does not change on other environment. @@
Other code in *.vue file also keep as origin.

Could you come back @coelmay please help me

This is the issue. You are changing an installed package directly.

The node_modules directory from the repository is ignored—as a general rule, the node_modules directory isn’t committed—as Netlify installs the modules from the package.json.

You don’t edit packages directly.

VuePress has a built-in way to add extra styling via .vuepress/styles/index.styl. If you want to add extra styling.

1 Like

Just some rows of your comment but save me. @coelmay

What I did is I directly edit a package inside node_modules. So i need to make changes in that package affect
There are two ways, first is run npm patch-package -package name- or rebuild my own package and publish it to npm. My site is running well now.
This is the solution.

again, thank you so much for your time, i really appreciate it.

Thank you so much for coming back and sharing this. Also, thank you @coelmay for your excellent insights as always!