In my local development environment, everything works as I intended. However in after running yarn build all of my styles are way different. I used create-react-app to set up the project, and I am using regular CSS to style it.
here is my file structure
and here is an example of what I am talking about.
and here
turns out there was nothing wrong with my code I was just zoomed in 500% so embarrassing
Related
While using Next.js + Tailwind + DaisyUI in development on Mac everything works as expected and all styles look normal, however when developing on WSL I noticed that my styles look very different and are pretty much broken from what I would expect. I'm encountering this same issue when deploying my site to Vercel. Does anyone know how I can resolve this?
Development (Mac)
Deployment (Vercel)
tailwind.config.js
I attempted to recreate the issue on my mac with no luck, however it seems this issue is showing up on Linux and Vercel deployment.
Update:
Turns out the issue stemmed from the fact that I had a css file in my styles folder and when I imported it into my homepage, it messed up the styling for everything else.
Not sure if this is supposed to be the expected behavior, but it did solve the issue
I am currently working on a project where I'm using css modules for each component and for pages containing the components. Apart from this I have a main index.css which just has the layout css and nothing else . I'm using bootstrap and react bootstrap apart from this. When I run npm build I notice that the react bootstrap is loaded but the module.css that I coded isn't, so my page looks horrid without styles. Can you offer any pointers on how I should proceed? Note: it's working perfectly fine running a server on 3000 on npm start and it is only on production that this happens. I am not using any specific webpack.config.js
I'm developing a progressive web app using Vue.js.
While I'm developing I use the command npm run dev to start the local server which serves the files on http://localhost:8080/. When I want to build for production I use npm run build prod which generates the output files in project\dist. I then take those files and copy them onto an ISS which is configured to work with single-page applications. All good so far.
I noticed some differences in the way the app looks (css) between the dev and prod build. First I thought this might be because of a client side cache, but after several tries to clean the cache and no-cache loading I'm sure that caching is not the issue here. The output really is different.
To be honest, I'm not sure if there is anything else different besides a few minor css parts. I was thinking what might be the issue, one of the things I noticed that could be the cause is that I use single file components in vue with scoped css (*.scoped.vue.css file names). I guess there could be an issue combining the different files into a single one?
It might be noted that I'm quite a newby when it comes to npm, webpack and all the other involved technologies. If you want to take a look at the configuration, you can find my current working branch build configurations here.
Any idea what the issue might be?
I encountered the same problem when using single file components. The issue indeed seems to be that when you run npm run build it will generate one single css file without the guarantee that the styling will be applied in the same order, causing some property values to be ignored. I 'fixed' it by adding !important to the properties that weren't matching up in the final build. There's probably a better way to handle this, but I must admit I too am quite a newby.
The order of how styles are applied while npm run build matters, and is to my knowledge out of (y)our control. To get rid of conflicts, when using Vue.js, you may want to scope your styles.
In every *.vue file within your project, replace
<style>
...
</style>
With
<style scoped>
...
</style>
We have our Angular 4 app scaffolded with angular cli, using scss as the default styling. We run the app with
ng serve --sourcemap --extractCss -o
To get scss source maps. This works fine, app compiles, runs, source maps work, etc.
However, coming from the Angular1/Gulp/Browsersync world, I am missing the injection of the built css without a full page reload. Currently, whenever I edit a sass file, webpack compiles and reloads the page in Chrome.
Is this the only way to work now? Is there no way to simply force a refresh of the css without a reload (like browsersync did it in the Gulp days)?
This is not exactly the same as CSS injection, but will make your page reload & compile a hell of a lot faster!
With Angular 7 you can follow this guide to enable HMR. (Hot Module Replacement)
It will also make reloading your .ts files very fast!
Small addendum:
I think you can infact load the CSS changed by injection but following this piece of the HMR documentation
Installed fullcalendar:fullcalendar#2.9.0 on my meteor project with
meteor add fullcalendar:fullcalendar
However the css won't show correctly, it is blue and funky looking compare to how it should look. see picture below. I created a new meteor project and tested on there and it works, i have no clue what is going on, tried deleting the local folder and rebuild still no luck..
In case this happens to others, issue turned out to be another packages CSS causing problems.