Not Loading CSS File In Laravel From public folder
i have all the css file in public folder and i also link them to my index but the css not working.
Try using PHP built-in webserver instead of artisan server
php -S localhost:8000 -t public/ (run this command in the root of your Laravel project).
Also, you need to run npm install && npm run dev so that the default CSS and JS will be compiled. (Laravel documentation)
You can access the public folder using asset (). Let's assume that there is a template folder under Public and a style.css file in this folder. If you use it as follows, your problem will be solved.
<link rel="stylesheet" href="{{ asset('template/') }}/style.css">
Related
I'm learning Symfony, following a tuto. Problem is, it is with Symfony5 and i'm using Symfony6.
The tuto says to create an assets folder in public directory, which I did :
When I use Twig to call my bootstrap.css like this :
<link href="{{ assets('assets/css/bootstrap.min.css' )}}" rel="stylesheet">
I get this error :
An exception has been thrown during the rendering of a template ("Asset manifest file "/Applications/MAMP/htdocs/laboutiquefr/public/build/manifest.json" does not exist. Did you forget to build the assets with npm or yarn?").
My questions are :
How do I fix this manifest.json error ?
I see an assets folder with Symfony6, which is not on the tuto with Symfony5. Should I use this folder instead ?
Thank you very much.
You need to build asset when updating css/js/images by using the command:
yarn encore dev --watch when using yarn or npm run watch when using npm.
This should build your assets (and create a manifest.json referencing those assets).
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 am trying to install silverstripe, downloaded the zip file, unzipped and copied all the files into the root of a folder in MAMP.
When I go to the root location in the url, in goes to install.php, but shows no styling whatsoever. But in the console no issues.
In this way I can't even install silverstripe because it isn't doing anything.
Any help would be appreciated.
SS 4.1 now uses a sub folder called public as root for your site. You will need to change the Document root to the public folder, and then move some files and folders into the public folder as described in the install docs.
htaccess
assets - folder
resources - folder
index
install
web.config
favicon
install-frameworkmissing
Most important run the following in composer
composer vendor-expose
My dev server is running on node live-server. My prod will be a LAMP server.
I have normalize.css inside my node_modules server.
In my index.html I have
<link rel="stylesheet" href="/node_modules/normalize.css">
<link rel="stylesheet" href="css/styles.css">
I don't want files linked to node_modules directory.
I want something like
<link rel="stylesheet" href="css/normalize.css">
Is this doable? I have lot of other css and js files like this.
Update 1
Let me clarify, this app is not a node app nor a php app, It has only html, css and js files. Everything runs on client side, But.. we want to leverage the latest client side dev tools for JS and CSS and upload the final build to prod server.
There are lots of possible solutions. I can suggest using a task runner(gulp) which will copy these static files to a public directory like dist/assets.
Install gulp on your machine
npm install --save-dev gulp
Create a gulpfile.js file in your root directory with following code.
var gulp = require('gulp');
gulp.task('default', function () {
gulp.src('/node_modules/normalize.css')
.pipe(gulp.dest('./dist/assets'));
});
Run gulp
gulp
Update your index.html as below
<link rel="stylesheet" href="/dist/assets/normalize.css">
Please go through the documentation of Gulp for more information
You can also try Grunt or Webpack
You could use Webpack for bundling, which would copy css resources to the dist and replace references to it. It doesn't support html files as entry points though, so you'd need to work around that by probably using html-webpack-plugin.
anyway, as was mentioned by others - server decisions are weird.
how to make semantic ui framework "right-to-left" supported ? is there
anyway to make it rtl support in installing steps or not ?
You can enable RTL support under the following scenarios:
1. Fresh Installation
go to the document root of your project and install semantic-ui through npm
npm install semantic-ui --save
modify semantic.json file in document root to enable right to left support as following:
"rtl": true
in your terminal change directory to semantic directory
cd semantic/
run the following gulp task to build all files and save it to destination folder
gulp build
gulp will auto-detect the RTL support and build the RTL version of css files and save them in dist folder, now a very important final step is to reference the RTL version of semantic-ui css file in your index.html or web page as following:
<link rel="stylesheet" type="text/css" href="semantic/dist/semantic.rtl.css">
2. Existing Installation
in your terminal change directory to semantic directory
cd semantic/
Clean the destination folder using the gulp task provided by semantic-ui framework
gulp clean
modify semantic.json file in document root to enable right to left support as following:
"rtl": true
run the following gulp task to build all files and save it to destination folder
gulp build
gulp will auto-detect the RTL support and build the RTL version of css files and save them in dist folder.
Now you need to replace the reference in your html page from
<link rel="stylesheet" type="text/css" href="semantic/dist/semantic.css">
to
<link rel="stylesheet" type="text/css" href="semantic/dist/semantic.rtl.css">
first:
navigate to your project root and then fire: npm install semantic-ui --save
and wait for all done.
second:
edit semantic.json file (located in project root) and change "rtl": false to "rtl": true
third:
navigate to semantic dir(cd semantic) and fire: gulp build and then gulp watch.
Or if you where not installing it by npm and gulp, you may get the rtl versions from RTLCSS website. They also provide a cdn, or you can download the css and js file and use them in your sources.