0

Hello!

I made a vuejs app to understand both vuejs and css(I learned both of them very recently). However, when i try to deploy it in Netlify(As per the instructions in vuejs documentations of hosting in netlify), my css doesnt get rendered even if i can see them in the DOM.

The Website: https://5f14ece18c76d30eee2d416b--condescending-mclean-801694.netlify.app/#/

In the website you will see all my css actually gets rendered to the DOM. There's an alert function in the 'contact me' buttons too that actually work. But for some reason the styling isnt working at all. I used global scoped css for my styles. And i dont even know why some pages such as the '/my-work' page gets rendered with its styles but not the others. This is super confusing.

Im using Vue cli3 and vuejs2 so I dont really have a vue.config.js file nor a webpack file. But i made it and i only have this code because i was having 404 errors too(I forgot to redirect everything to the homepage and let vue handle it)

module.exports = {
  publicPath: process.env.NODE_ENV === "production" ? "/" : "/",
};

This is my github repository for the website - https://github.com/Pandaaa-dev/wasifPortofolio/tree/finished

I honestly dont know what im doing wrong. There was an identical problem I followed in the questions here but even that doesnt work(the solution was to use global scoped style tags). And I'm pretty new to this place so I'm not really sure if my question is informative enough in the first place. But you guys are ofc more good at this stuff than me so hopefully I'll get a solution Please help T.T.

Pandaaa-dev
  • 1
  • 1
  • Your CSS **is** loading but it looks like some of your styles are _odd_. For one, your `.main__page` element has `opacity: 1%` – Phil Jul 20 '20 at 01:36
  • Ah, if you're using `opacity: 100%` in your keyframe animations, try changing it to `opacity: 1`. I think it's a lib-sass problem with percentage based opacities – Phil Jul 20 '20 at 01:38
  • 1
    Does this answer your question? [Nuxt compiles CSS Opacity at 1% instead of 100% when deployed to Netlify](https://stackoverflow.com/questions/62054132/nuxt-compiles-css-opacity-at-1-instead-of-100-when-deployed-to-netlify) – Phil Jul 20 '20 at 01:40
  • There is something wrong with your animations. and @Phil is right, opacity has a relation to your problem. – rjcarl Jul 20 '20 at 04:44
  • 1
    Thank you so much @Phil ! It finally worked! I fixed all the opacities from percentage to points between 0 and 1 and it finally worked! I've been searching for a solution for almost a week and i finally got it. Thank you! – Pandaaa-dev Jul 20 '20 at 10:47

0 Answers0