I am trying to compile my app.scss file that comes with my new project from Laravel, but I want to install Bootstrap 4. At the time of doing my npm run dev does not install Bootstrap 4, but it still has the Bootstrap that Laravel brings by default.
Any recommendations or documentation for this?
In fact Laravel comes with Bootstrap 4 by default. If you take a look at https://github.com/laravel/laravel/blob/master/package.json file (you should have package.json in your project too) you will see line:
"bootstrap": "^4.0.0"
what means Bootstrap 4 will be installed.
You should run
npm install
to install all packages and by default it will install Bootstrap 4.
This ~ sign mean here node_modules directory so in fact line
#import "~bootstrap/scss/bootstrap"
means
#import "node_modules/bootstrap/scss/bootstrap"
If you look in the Laravel welcome.blade.php file, you can see some CSS and a link tag that imports a Google Font. This is not to be confused with actually importing Bootstrap 4.
Heres the steps to take to implement Bootstrap 4, and all the other cool things that come with Laravel by default. It already seems as though you've run npm run watch so I'm going to assume you've run that command.
Simple Steps
Add a link tag to your head element:
<link rel="stylesheet" href="css/app.css">
Add the following at the bottom of your body element:
<script src="js/app.js" charset="utf-8"></script>
That should do it for you. But please make sure you've compiled the SCSS files and Javascript files using the npm run watch command or else it won't work!
Cheers!
Related
I'm trying to change the color theme of bootstrap with sass. I'm running the command npm run watch and when I save it does in prompt me with:
Laravel Mix Build Successful
When I view my page I do not see the changes. (I've cleared cache and hard refreshed as well as closed broswer/new browser) To do this I'm updating "warning" to be a purplish color, but bg-warning is not changing to a purplish background (I believe this is what is intended).
I'm using Laravel framework 5.5
Here is my webpack.mix.js
Here is my app.scss
Here is my base/_colors.scss
I've tried throwing my base/_colors.scss code straight into the app.scss file with no luck either. (Even though it says it builds properly.)
I've also tried running the following with no success:
npm run dev
npm run production
Edit: the other possibility is this is not how sass works with bootstrap. Do I need to actually assign things the color of $warning or does this look for all instances of $warning (.alert-warning, .bg-warning, etc.) and replace?
Try running npm hot, that helped me:
npm run hot
I would do following further steps:
check if the folder base really exists
create a a new css file which in not inside a folder (base) just to check that that does not cause an error
Write simple css in your _colors.css and check if that works
add an !important statement after your color declaration to check if it does not have to do anything relating overriding the styling
I have downloaded a free HTML theme.
If I open index.html file of the theme in the browser it works perfectly.
However, now I need to integrate this theme in my Laravel Application. If I inspect element in the index.html file loaded in the browser, I can see that some .scss files are getting called.
The scss folder is present in the theme folder but I really don't know how to include this into my project
You can think of SASS as high level css which provides you with more features like making variable and easier css syntax etc ... but since browsers doesn't understands SASS you have to compile SASS into CSS there are multiple ways to do that.
First if your theme folder already has complied SASS (CSS Folder) you can use it if not and want to integrate with Laravel please follow these steps
Copy everything in your SASS Folder and place it in "/resources/assets/sass" so
they can be found by Laravel to be compiled
now you have to compile SASS into css you can use gulp manually or make use of
Laravel mix which is already implemented for you by Laravel
Laravel Ships with packages.json file you will find that in your app root
directory so before being able to compile SASS you have to run npm install in
your root directory (make sure that you have npm and node installed)
after running npm install now you can run either one of these to compile any
sass files you have in "resources/assets/sass"
npm run dev //this will compile one time only
npm run watch //this will automatically watch for any changes and compile
Now your sass files should have been compiled to css you can find the compiled css files in your "public/css" folder.
Hopefully you found this helpful you can read more about this in Laravel docs frontend section specifically Laravel Mix here
Laravel has a file called webpack.mix.js where you edit all frontend assets compilation by calling the mix.js/sass with the respective arguments. It is located at the root of the project.
1- In the resources folders create a new folder and call it scss with a app.scss file. The complete tree will be scss/app.scss
2- Go to the webpack.mix.js and add a new line: mix.sass('resources/sass/app.scss', 'public/css');. The first argument of the method is the source file, and the second is the destination folder.
3- In the app.scss file import all the theme scss files using #import 'file/source';
4- Open terminal/cmd in your Laravel project folder and Run npm run dev/watch to compiled your scss file, and at end your css file result will be located in public/css/app.css.
5- Import the app.css into your Html head section and reload the page. If the styles do not work, press ctrl + f5 to clean browser cache.
The latest version of Laravel utilizes a tool called Vite as a replacement for Laravel Mix.
In order to use Sass with Vite, make sure that Vite and Sass are installed run npm install and npm add -D sass
Make sure you have a sass or scss folder in your projects resources directory, and an scss file inside like app.scss
Make sure that you have configured vite.config.js (which can be found in a new Laravel projects root directory) to include an entry point for sass like so, utilizing the correct path and name for the folder you made:
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
export default defineConfig({
plugins: [
laravel({
input: ['resources/scss/app.scss', 'resources/js/app.js'],
refresh: true,
}),
],
});
And in your Blade files add the following, again making sure to use the correct path for the folder you made:
#vite(['resources/scss/app.scss', 'resources/js/app.js'])
Then you can build your sass using Vite by running npm run build
I use sass code in nuxt components simply by adding lang="scss" in the style tags. When I add this attribute to the style tag in a layout file (layouts folder) the style tag isn't processed any more and the following css (scss) code ignored.
Can anybody explain what's happening and how to fix this issue?
You have to install node-sass and sass-loader in order to use pre-processor, run this terminal command in the project folder
npm install sass-loader node-sass --save-dev
And take a look this link to enable other pre-processor in Vue, Pre-Processors - vue-loader
Problem solved: After having re-started the dev server (npm run dev) nuxt compiled scss code correctly. The issue seems to be limited to the live browser update in dev mode.
Newbie Laravel user here.
I have the following lines in app.scss file (created automatically by Laravel):
#import url(https://fonts.googleapis.com/css?family=Raleway:300,400,600);
#import "variables";
#import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap";
Question: How do I make use of Bootstrap in my project? I don't see it getting compiled or getting copied to my public/css folder. And in general, how do I pull in any packages in the nodes_module to my Laravel project using Mix. Thanks in advance!
With Laravel Mix, Bootstrap is automatically imported in your resources/assets/js/app.js and resources/assets/js/bootstrap.js.
Also with the last import, it is bringing all of bootstrap inside your CSS, so when you run npm run watch it will copy all of it and you'll be able to use it.
I run php artisan make:auth command in laravel 5.3, it generates the scaffolding for me but the view styles are missing.
Login and registered views are not styles, they are just simple html.
Double check source code if the styles links are linked correctly or not ?
Check views code and in there check for the link and script tags . You should use something like this to link the css and scripts etc
{{ url('styles.css') }} It will grab the styles from your app public directory.
In your project_name\resources\views\layouts\app.blade.php view file, just remove first slash in css path - instead of:
<link href="/css/app.css" rel="stylesheet">
put:
<link href="css/app.css" rel="stylesheet">
You will probably need to do the same for js path.
npm install
npm run dev
Once the dependencies have been installed using npm install, you can compile your SASS files to plain CSS using Laravel Mix. The npm run dev command will process the instructions in your webpack.mix.js file. Typically, your compiled CSS will be placed in the public/css directory:
https://laravel.com/docs/5.8/frontend#writing-css
You need load file .css and .js
1) execute in your project
npm install
2) then execute
npm run dev => now in folder /public now exist folder js and css
3) reload page