After trying to import some custom css style sheets using the @import directive on my /resources/sass/app.scss file, I have noticed the stylesheets are successfuly compiled to the /public/css/app.css file when using relative paths, in this case "../css/mystylesheet.css", but it doesn't seem to work when using the absolute path "/resources/css/mystylesheet.css". Could someone elaborate on why this is happening?
Following are my app.scss and mystylesheet.css contents:
=================APP.SCSS =================
@tailwind base;
@tailwind components;
@tailwind utilities;
@import '/resources/css/animation.css' <=== This doesn't work, but "../css/animation.css" works.
=================ANIMATION.CSS =================
.flutter { animation: flutter 2.5s; animation-iteration-count: infinite; }
@keyframes flutter { 0% { transform: translate(0, 0px)} 5% { transform: translate(0, -0.5px)} 10% { transform: translate(0, -1px)} 15% { transform: translate(0, -1.5px)} 20% { transform: translate(0, -2px)} 25% { transform: translate(0, -2.5px)} 30% { transform: translate(0, -2px)} 35% { transform: translate(0, -1.5px)} 40% { transform: translate(0, -1px)} 45% { transform: translate(0, -0.5px)} 50% { transform: translate(0, 0px)} 55% { transform: translate(0, 0.5px)}
... animations, etc.
@gfvante I believe that when you do this: "/resources/css/mystylesheet.css" this is not an absolute path, but it expects the file to be placed in the same folder with the file that you are importing in an additional resources/css directories.
An absolute path should be full path from your system, for example for me on a Mac would be:
/Users/nakov/projects/my-project/resources/css
Have you tried this?
Indeed. I was under the wrong impression that "/" would mean the root directory of my application in that context and that led to all the confusion. Thanks for the incredibly fast reply.
Please or to participate in this conversation.