I'm getting crazy with this matter and seems i can't find a solution.
I started a laravel project and i'm unable to get the css working correctly.
I have created a new file named style.css in my resources/css, than i have linked that file to my app.css with #import 'style.css';.
The app.css is linked in my app.blade.php with <link href="{{ asset('css/app.css') }}" rel="stylesheet">
Everything seems fine to my eyes, but the css in style.css doesn't work.
I've tried any solution that i know, and also looked several web pages and other older projects done but everything seems correct, probably is just because i'm really tired.
Does any one can help me to solve it?
Thank you
The path of the method asset() ends in the public folder
you need to compile app.css by run this command "npm run dev"
if don't install npm before run "npm install" first
Related
#ask
Hello I want to ask,
Now I'm working on a college project, using laravel, when I enter the Blade Templating stage in Laravel ... I'm having trouble trying to move the .sass file to my Laravel project.
because previously when making the initial appearance of the website that I created, I used sass.
the question is, how do you get the .sass file to run in laravel?
#first-effort
previously I've searched on google and got the same question on stackoverflow... he suggested to install npm "npm install", then move all my css and sass files to resources/assets/sass after that run the command "npm run dev" , then it says all files will go to the app.css file
but after I try to run it, the result is still the same.
#my sass photo
https://imgur.com/a/xVNChUh
#Project display now when run
https://imgur.com/a/VQl242R (there is some styling because I made some styling in main.css, but the rest is in the sass file, so it looks messy like that)
#My Project display "should" (this is still running using html css on local)
https://imgur.com/a/Az8nx1W
Please help
I am working on a laravel project and had written some CSS codes inapp.css. When I started building Vue components, the app.css codes stopped being rendered. The file is being fetched as <link href="{{ asset('/css/app.css') }}" rel="stylesheet">. The CSS does not reflect but font-awesome icons which are fetched in the same way are appearing. What could make this happen?
`
If I am reading your question correctly I will make a couple of assumptions and give what I think may have happened.
I read you edited app.css and then worked with your compiled system.
I am guessing you did this via npm run dev or a variation there of.
Upon doing this, it writes a new app.css file based on your app.scss file.
So, I am thinking that when you compiled your app you wiped out app.css as it should and rewrote the app.css with the build out of app.scss.
You should be having your css in app.scss or in a file that #import that file.
And to then to compile your css with npm run dev, npm run prod, or npm run watch
If you want to mix in css with app.scss you can either use the #import mentioned above or combine them via webpack.
To add font awesome to the app.css you do so with:
npm i #fortawesome/fontawesome-free
Add the following to app.scss:
// Font Awesome
#import "~#fortawesome/fontawesome-free/scss/fontawesome";
#import "~#fortawesome/fontawesome-free/scss/regular";
#import "~#fortawesome/fontawesome-free/scss/brands";
#import "~#fortawesome/fontawesome-free/scss/solid";
#import "~#fortawesome/fontawesome-free/scss/v4-shims";
Compile with npm run dev or npm run prod
https://laravel.com/docs/7.x/mix#sass
https://laravel.com/docs/7.x/mix#plain-css
I've just done a fresh install of the latest Symfony version. Inside my templates folder I've created a new folder called website which contains a base.html.twig and a home.html.twig.
File structure: templates/website/base.html.twig
Inside my public directory I've created the following css/app.css. Now in my base I've done:
<link rel="stylesheet" href="{{ asset('css/app.css') }}" type="text/css">
Inside my stylesheet I'm just setting the body background colour to red so I know it works. For whatever reason it isn't loading my css. When I view source it appears as:
<link rel="stylesheet" href="/css/app.css" type="text/css">
and clicking the href I just get a Symfony 404. I cannot figure out why it isn't loading my static CSS file.
I don't want to use Symfony Encore as thats overcomplicating things for my project. I have also tried assets:install command and nothing installed or changed.
UPDATE:
I installed and done a basic setup with Symfony Encore in the hope I could at least get some CSS working. Still get the exact same issue.
If you want to use the asset funtion you have to install the component first with the following command:
composer require symfony/asset
That is really all there is to it if you do not wish to use webpack encore.
Optional: If you happen to use PHPStorm with the Symfony plugin, go to settings > symfony and change Web Directory from app to public for the new directory that Symfony 4 uses. This gives you all the autocomplete goodness and your references will work.
You should store your static files inside the assets directory at the root of your project. So just place the css-folder with the app.css-file in <root>/assets/css/app.css
Source: https://symfony.com/doc/current/best_practices/web-assets.html
I created a new project using Laravel 5.5 and I am trying to link my CSS but it does not work. When I put some CSS codes nothing happens to my page. I already tried clearing my cache. I do not know whats wrong, please help. Here is how I linked my css in my app.blade.php
<link href="{{ asset('css/style.css') }}" rel="stylesheet">
Here is my css code:
body{
background-color: black;
}
Any help would be appreciated. Thanks.
If you put the css inside a css file in your resource folder, you need to build it with NPM:
npm install
then
npm run watch
If you directly put it in the public folder, have you checked to make sure you're linking the right file? Also, try ctrl + f5 to hard refresh
The file style.css must be there in the required location. By default it will be:
/public/css/style.css
Otherwise if you have changed the resource path to your web server root, then it could be:
/css/style.css
I am using grunt build to copy files from production to build. While working I am using local bootstrap css, however in build I need CDN url to be replaced for bootstrap.
<!--build:css http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css-->
<link rel="stylesheet" href="assets/css/bootstrap.min.css" />
<!-- endbuild-->
First of all is this possible? Grunt build is giving error for http path while using usemin.
Thanks.
Got temporary solution to this.
My grunt build was perfect except http:// url for bootstrap. So i used --force (grunt build --force) command to build my project.
This gave me warning but build the project as per my requirements and CDN url for bootstrap.