All Questions



Does anyone know why ‘npm run develop’ is not refreshing when I change the CSS classes? [SOLVED]

Does anyone know why ‘npm run develop’ is not refreshing when I change the CSS classes?

It only works if I kill the process and run the command again…

author Tiago Ferreira

Reply
27 Answers

<@U02U9TESZ6U>, <@U03GPL1GCDU>, Dobroslav Radosavljevič?

writen by Tiago Ferreira

Can’t tell if I don’t see code

writen by Dobroslav Radosavljevič

I suppose develop is a Gatsby command, I don’t know much about it. Moreover, are you using tailwind? it might depend on its configuration.

writen by Luca Restagno (ikoichi on Twitter)

Show us your package.json Tiago Ferreira

writen by Dobroslav Radosavljevič

I am using tailwind Luca Restagno (ikoichi on Twitter). I have also tried with npm run start Could it be related with tailwind?

writen by Tiago Ferreira

I won’t show before you buy me dinner first Dobroslav Radosavljevič

writen by Tiago Ferreira

here

'name': 'indielottery',
'version': '1.0.0',
'private': true,
'description': 'indielottery',
'author': 'Tiago',
'keywords': [
'gatsby'
],
'scripts': {
'develop': 'gatsby develop',
'start': 'gatsby develop',
'build': 'gatsby build',
'serve': 'gatsby serve',
'clean': 'gatsby clean',
'typecheck': 'tsc --noEmit'
},
'dependencies': {
'@fontsource/montserrat': '^4.5.13',
'gatsby': '^4.23.1',
'gatsby-plugin-image': '^2.23.1',
'gatsby-plugin-sass': '^5.23.1',
'gatsby-plugin-sharp': '^4.23.1',
'gatsby-plugin-sitemap': '^5.23.1',
'gatsby-source-filesystem': '^4.23.0',
'gatsby-transformer-sharp': '^4.23.1',
'react': '^18.1.0',
'react-dom': '^18.1.0',
'sass': '^1.55.0'
},
'devDependencies': {
'@types/node': '^17.0.45',
'@types/react': '^18.0.20',
'@types/react-dom': '^18.0.6',
'autoprefixer': '^10.4.12',
'gatsby-plugin-postcss': '^5.23.0',
'postcss': '^8.4.16',
'tailwindcss': '^3.1.8',
'typescript': '^4.8.3'
}
}```

writen by Tiago Ferreira

Did you configured it as here? <https//tailwindcss.com/docs/guides/gatsby>

writen by Dobroslav Radosavljevič

Btw. Gatsby is Pretty much everyone switching to smth else. Next.js is better choice.

writen by Dobroslav Radosavljevič

do you mean it is not maintained anymore Dobroslav Radosavljevič?

writen by Tiago Ferreira

It is somehow, but other frameworks offer more and better features + support

writen by Dobroslav Radosavljevič

yup, I did follow that exact tutorial. And the weird thing is that it was working fine…

writen by Tiago Ferreira

Try delete node_modules and npm i

writen by Dobroslav Radosavljevič

Next.js is backed by Vercel. That’s good motivation to switch. I’ve built many websites with it and it’s really good experience

writen by Dobroslav Radosavljevič

It’s only Gatsby. You need tailwind watching as well

writen by Benedikt

He has the plugin Benedikt

writen by Dobroslav Radosavljevič

For postcss. Then tailwind has to be configured for it

writen by Benedikt

That postcss plugin should watch changes for your, if configured correctly (added to gatsby config)

writen by Dobroslav Radosavljevič

Tiago said he did it as it is in docs

writen by Dobroslav Radosavljevič

That should be enough

writen by Dobroslav Radosavljevič

Well, sth doesn’t add up then

writen by Benedikt

here is my gatsby config



const config: GatsbyConfig = {
siteMetadata: {
title: `indielottery`,
siteUrl: `<https://www.yourdomain.tld>`
},
graphqlTypegen: true,
plugins: ['gatsby-plugin-image', 'gatsby-plugin-sitemap', 'gatsby-plugin-sharp', 'gatsby-transformer-sharp', 'gatsby-plugin-postcss', {
resolve: 'gatsby-source-filesystem',
options: {
'name': 'images',
'path': './src/images/'
},
__key: 'images'
}
]
};


export default config;```

writen by Tiago Ferreira

But I just noticed that is not only with CSS that this happens. I just introduced a onClick function that only worked after killing the process and restarting it… Could it be a react problem? I am implementing this changes in a sub component…

writen by Tiago Ferreira

> It turns out it was because the casing of the component name in my imports was not the same as the actual component folder name.

writen by Luca Restagno (ikoichi on Twitter)

could you double check that?

writen by Luca Restagno (ikoichi on Twitter)

there are many different causes described here: https://github.com/gatsbyjs/gatsby/issues/13918

writen by Luca Restagno (ikoichi on Twitter)

haha that was it Luca Restagno (ikoichi on Twitter) Thank you very much!!

writen by Tiago Ferreira

Do you want to ask a question?


Related Questions