I'd like to use Bootstrap with Laravel 5.4. According to the docs
The default webpack.mix.js included with Laravel will compile the resources/assets/sass/app.scss SASS file. This app.scss file imports a file of SASS variables and loads Bootstrap, which provides a good starting point for most applications. Feel free to customize the app.scss file however you wish or even use an entirely different pre-processor by configuring Laravel Mix.
How do I include the app.scss file. i.e. -- if this were an app.css, I'd like link it in the head of my document. However, as its an app.scss file, the browser won't understand it natively (or will it?) and I'm not sure how Larval expects us to insert this into the page.
After building your assets with something like npm run dev or npm run prod, you'll get a plain old app.css file somewhere in your public tree. After that, a little
<link rel="stylesheet" href="{{ mix('/css/app.css') }}">
in your blade templates and you should be good to go.
Before you can use app.scss you need to compile scss file to css and move the compiled file to public directory in your Laravel project root.
Where you store compiled css is up to you, most people store css in public/css/app.css
There are several automation tools you can use to compile app.scss such as Laravel mix, gulpjs, grunt etc.
To learn more about compiling scss files start here: https://laravel.com/docs/5.4/mix
However, you mustn't go through all these processes in order to use Bootstrap in Laravel blade
Simply move bootstrap files (css,js) to Laravel public directory and use then like so in your blade template.
<head>
<title>Page Title</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="{{assets('css/bootsrap.css')}}" />
</head>
Related
If I have a file css/style.css inside the public folder. Can I include this file in a .blade.php file using:
<link rel="stylesheet" href="css/style.css">
instead of
<link rel="stylesheet" href="{{asset('css/style.css')}}">
Or what's the difference between the two cases?
if the style files are placed in the public directory, you can write the path to them without asset helper and everything will work. However, if the resources you need are outside the public directory, this helper is indispensable. I think the file storage documentation will suit you
I installed bootstrap and JavaScript through NPM in Laravel 6 and it's working fine since i am able to use bootstrap in my web page. But whenever i am adding custom styling in resources/sass/app.scss folder, the custom styling isn't works.
You need to compile the app.scss file. Please run
npm run dev
This will compile your scss file to public/css/app.css. Now you can link the css in your blade template as:
<link rel="stylesheet" type="text/css" href="{{ asset('css/app.css') }}" />
The Problem:
I am updating a website that was created using Compass. I installed Compass and then ran the following command to set up Compass with my existing project. Next I imported Compass into my global.scss file. SASS-Autocompile (a package for the text editor Atom) fails to locate the file and throws a compilation error. I am not sure if this is an issue with the set up of compass or if it is a problem with SASS-Autocompile. Here are the steps I took which led up to this point.
compass create --sass-dir "scss" --css-dir "css" --images-dir "images"
Output:
*********************************************************************
Congratulations! Your compass project has been created.
You may now add and edit sass stylesheets in the scss subdirectory of your project.
Sass files beginning with an underscore are called partials and won't be
compiled to CSS, but they can be imported into other sass stylesheets.
You can configure your project by editing the config.rb configuration file.
You must compile your sass stylesheets into CSS when they change.
This can be done in one of the following ways:
1. To compile on demand:
compass compile [path/to/project]
2. To monitor your project for changes and automatically recompile:
compass watch [path/to/project]
More Resources:
* Website: http://compass-style.org/
* Sass: http://sass-lang.com
* Community: http://groups.google.com/group/compass-users/
To import your new stylesheets add the following lines of HTML (or equivalent) to your webpage:
<head>
<link href="/css/screen.css" media="screen, projection" rel="stylesheet" type="text/css" />
<link href="/css/print.css" media="print" rel="stylesheet" type="text/css" />
<!--[if IE]>
<link href="/css/ie.css" media="screen, projection" rel="stylesheet" type="text/css" />
<![endif]-->
</head>
global.scss
#import "compass";
Terminal: (while in project root dir)
compass compile
Output:
warning Webkit only supports pixels for the start and end stops for radial gradients. Got: 70%
write css/global.css
Then I save my global.scss file which runs SASS-Autocompile and this error is presented.
SASS-Autocompile: Compiliation Error
{
"message": "File to import not found or unreadable: compass.
Parent style sheet: /Users/robby/Documents/reseminary/wordpress/wp-content/themes/dev.reseminary.edu/scss/global.scss",
}
I import styles and scripts in a view.blade.php like this
But when I run the project, none of these styles are running:
My source:
This project runs well on other computers.
If your css is in the following directory:
/public/css/blog-home.css
You can try the following:
<link rel="stylesheet" type="text/css" href="/css/blog-home.css">
Have a read at: https://laravel.com/docs/5.5/mix
Simply refer your stylesheets to the public folder public/css/style.css
<link rel="stylesheet" type="text/css" href="/css/style.css">
If you have multiple style sheets and want to mix them run laravel mix
mix.styles([
'public/css/vendor/style.css',
'public/css/vendor/fontrian.css' //and other style sheets
], 'public/css/all.css');
npm run dev
This will compile all your plain css to the public folder automatically.
I setup a new ionic project using the -s option to enable SASS.
Here is a part of my /myproject/scss.ionic.app.scss:
...
$positive: #2a8000 !default;
$button-font-size: 30px !default;
// Include all of Ionic
#import "www/lib/ionic/scss/ionic";
When saving this scss file, I can see in the shell that sass is launched and css is re-built:
[00:18:18] Starting 'sass'...
CSS changed: www/css/ionic.app.css
[00:18:18] Finished 'sass' after 330 ms
CSS changed: www/css/ionic.app.min.css
However, the new css file seems to be exactly the same, whatever I put into the scss file.
Can you explain why?
Thanks a lot.
It was pretty stupid...
I didn't pay attention that SASS generates the new css in www/css/ionic.app.css
However, the file included in the default ionic index.html is lib/ionic/css/ionic.css
The only thing to do is to write
<link href="css/ionic.app.css" rel="stylesheet"> in index.html
and remove
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
To solve this in my project, I had to install gulp first.
npm install -g gulp