I'm trying to build a project with Laravel and Vue. I'm using the Frontend Scaffolding as described here: https://laravel.com/docs/7.x/frontend
$ composer require laravel/ui
$ php artisan ui vue
This loads Bootstrap and creates some javascript files and SCSS files:
-->resources
|-->js
|-->app.js
|-->bootstrap.js
|-->sass
|-->_variables.scss
|-->app.scss
This also makes some changes to resources/views/welcome.blade.php
What I don't understand is where / how resources/sass/app.scss is used by Vue. I have tried changing some things in _variables.scss, like base font size and font family, but I don't see the results reflected anywhere. At the same time, the file is obviously being processed by npm run dev because if, for example, I introduce a syntax error, the npm run dev command will report it.
I'm sorry if this is insufficient details to answer my question, I'm trying my best. I'm not very experienced with Vue. If there's anything else you need to know, please ask in the comments.
Writing CSS
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:
npm run dev
The webpack.mix.js file included with Laravel's frontend scaffolding will compile the resources/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.
What in a few words would be that you work in the resources/sass/app.scss file, then compile with npm run ... and you will have the resulting css in the /public/css/app.css file. You can change/configure that on the webpack.mix.js file.
Then you load the compiled file in some view, as you would with html and common css:
<link href="/css/app.css" rel="stylesheet" type="text/css" />
But if you want to take advantage of other laravel mix features, you can use the mix() method:
<link href="{{ mix('css/app.css') }}" rel="stylesheet" type="text/css" />
Typically the css is loaded into a blade template that has the <html>, <head> and <body> tags that you can use as a layout from which to extend your other views.
Ie:
/resources/views/layouts/app.blade.php
<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Scripts -->
<script src="{{ mix('js/app.js') }}" defer></script>
<!-- Styles -->
<link href="{{ mix('css/app.css') }}" rel="stylesheet">
</head>
<body>
<div id="app">
#yield('content')
</div>
</body>
</html>
/resources/views/home.blade.php
#extends('layouts.app')
#section('content')
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">Home</div>
<div class="card-body">
#if (session('status'))
<div class="alert alert-success" role="alert">
{{ session('status') }}
</div>
#endif
You are in Home view!
</div>
</div>
</div>
</div>
</div>
#endsection
Related
problem(showing in console)
GEThttp://127.0.0.1:8000/public/vuexy-assets/vendors/css/vendors.min.css
[HTTP/1.0 404 Not Found 580ms]
GEThttp://127.0.0.1:8000/public/vuexy-assets/css/bootstrap-extended.css
[HTTP/1.0 404 Not Found 1153ms]
GEThttp://127.0.0.1:8000/public/vuexy-assets/css/bootstrap.css
[HTTP/1.0 404 Not Found 885ms]
GEThttp://127.0.0.1:8000/public/vuexy-assets/css/core/menu/menu-types/vertical-menu.css
[HTTP/1.0 404 Not Found 2443ms]
GEThttp://127.0.0.1:8000/public/vuexy-assets/css/themes/semi-dark-layout.css
[HTTP/1.0 404 Not Found 2158ms]
GEThttp://127.0.0.1:8000/public/vuexy-assets/css/themes/dark-layout.css
[HTTP/1.0 404 Not Found 1917ms]
GEThttp://127.0.0.1:8000/public/vuexy-assets/css/components.css
[HTTP/1.0 404 Not Found 1664ms]
GEThttp://127.0.0.1:8000/public/vuexy-assets/css/colors.css
[HTTP/1.0 404 Not Found 1405ms]
GEThttp://127.0.0.1:8000/public/vuexy-assets/css/core/colors/palette-gradient.css
[HTTP/1.0 404 Not Found 2671ms]
GEThttp://127.0.0.1:8000/public/vuexy-assets/css/pages/authentication.css
[HTTP/1.0 404 Not Found 3185ms]
GEThttp://127.0.0.1:8000/public/vuexy-assets-sep/assets/css/style.css
[HTTP/1.0 404 Not Found 3580ms]
GEThttp://127.0.0.1:8000/public/vuexy-assets/images/pages/login.png
[HTTP/1.0 404 Not Found 5053ms]
GEThttp://127.0.0.1:8000/public/vuexy-assets/vendors/js/vendors.min.js
[HTTP/1.0 404 Not Found 3878ms]
GEThttp://127.0.0.1:8000/public/vuexy-assets/js/core/app-menu.js
[HTTP/1.0 404 Not Found 4127ms]
GEThttp://127.0.0.1:8000/public/vuexy-assets/js/core/app.js
[HTTP/1.0 404 Not Found 4425ms]
GEThttp://127.0.0.1:8000/public/vuexy-assets/js/scripts/components.js
[HTTP/1.0 404 Not Found 4681ms]
Loading failed for the <script> with source “http://127.0.0.1:8000/public/vuexy-assets/vendors/js/vendors.min.js”. 127.0.0.1:8000:297:1
Loading failed for the <script> with source “http://127.0.0.1:8000/public/vuexy-assets/js/core/app-menu.js”. 127.0.0.1:8000:302:1
Loading failed for the <script> with source “http://127.0.0.1:8000/public/vuexy-assets/js/core/app.js”. 127.0.0.1:8000:303:1
Loading failed for the <script> with source “http://127.0.0.1:8000/public/vuexy-assets/js/scripts/components.js”. 127.0.0.1:8000:304:1
This is my problem. when I load my website, its frontend UI is gone, only shown the basic HTML structure. I tried every thing to make it to correct but I cant make it.
code from my layout
<link rel="stylesheet" type="text/css" href="{{ asset('vuexy-assets/css/bootstrap.css') }}">
<link rel="stylesheet" type="text/css" href="{{ asset('vuexy-assets/css/bootstrap-extended.css') }}">
<link rel="stylesheet" type="text/css" href="{{ asset('vuexy-assets/css/colors.css') }}">
<link rel="stylesheet" type="text/css" href="{{ asset('vuexy-assets/css/components.css') }}">
<link rel="stylesheet" type="text/css" href="{{ asset('vuexy-assets/css/themes/dark-layout.css') }}">
<link rel="stylesheet" type="text/css" href="{{ asset('vuexy-assets/css/themes/semi-dark-layout.css') }}">
<!-- BEGIN: Page CSS-->
<link rel="stylesheet" type="text/css" href="{{asset('vuexy-assets/css/core/menu/menu-types/vertical-menu.css') }}">
<link rel="stylesheet" type="text/css" href="{{asset('vuexy-assets/css/core/colors/palette-gradient.css') }}">
<!-- END: Page CSS-->
<script src="{{ asset('/vuexy-assets/vendors/js/vendors.min.js') }}"></script>
<!-- BEGIN Vendor JS-->
<!-- BEGIN: Page Vendor JS-->
<script src="{{ asset('/vuexy-assets/vendors/js/ui/jquery.sticky.js') }}"></script>
<!-- END: Page Vendor JS-->
<!-- BEGIN: Theme JS-->
<script src="{{ asset('/vuexy-assets/js/core/app-menu.js') }}"></script>
<script src="{{ asset('/vuexy-assets/js/core/app.js') }}"></script>
<script src="{{ asset('/vuexy-assets/js/scripts/components.js') }}"></script>
my page currently looks like this
what I tried
install npm
npm run div
composer require laravel/ui
php artisan install bootstrap ui
I also tried installing yarn, and also did sass-loader degrade to "sass-loader": "10.1.1", from 11.0.0
By default, Laravel's asset helper points to public folder inside your application folder. If your assets are placed there, then your asset path should be like this.
Instead of
If your assets are outside from public directory, then please make a magic link between that directory and public directory.
Rewrite link from
To
This will correct the following errors.
I want to use Awesome font icons in a laravel/Vue project:
I installed the fonts:
npm install font-awesome --save
Add to resources/sass/app.scss the line: #import "node_modules/font-awesome/scss/font-awesome.scss";
npm run dev
The relevant part of my layout file:
<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>
<!-- Fonts -->
<link rel="dns-prefetch" href="//fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
But when I use any awesome icon in my html pages, e.g.
<i class="fa fa-copy"></i>
I always get a kind of dummy icon:
I then found this page: https://www.itsolutionstuff.com/post/how-to-install-and-use-font-awesome-icons-in-laravelexample.html. An dI tried to add the line
<link type="text/css" rel="stylesheet" href="{{ mix('css/app.css') }}">
to the fonts part of my layout html-file. But I still get the dummy icon.
Any idea what the problem is?
Regards,
Hubert
You're using an older Font Awesome version.
npm install #fortawesome/fontawesome-free
Add to resources/sass/app.scss the following:
// Font Awesome
#import '~#fortawesome/fontawesome-free/scss/fontawesome';
#import '~#fortawesome/fontawesome-free/scss/regular';
#import '~#fortawesome/fontawesome-free/scss/solid';
#import '~#fortawesome/fontawesome-free/scss/brands';
Finally,
npm run dev
Before I state my problem I have done the following:
I've followed everything stated in the Getting started and installed the framework in my laravel project. Also I refereed to the answer here and made a quick search on stackoverflow but couldn't find a solution.
Now the problem is that I can't include semantic.min.css and semantic.min.js in my page because it's not found. I need someone to help me with the right instructions to use semantic ui in my 5.6 laravel project.
This my HTML code so far:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Gym Management</title>
<link rel="stylesheet" type="text/css" href="{{ asset("semantic/dist/semantic.min.css") }}">
<link rel="stylesheet" href="../css/style.css">
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<script src="{{ asset("semantic/dist/semantic.min.js") }}"></script>
</head>
<body>
<div class="ui container">
HELLO
</div>
webpack.mix.js
let mix = require('laravel-mix');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel application. By default, we are compiling the Sass
| file for the application as well as bundling up all the JS files.
|
*/
mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css')
.copy('node_modules/semantic-ui-css/semantic.min.css','public/css/semantic.min.css')
.copy('node_modules/semantic-ui-css/semantic.min.js','public/js/semantic.min.js');
A snapshot when I inspect the page.
Mostly i am getting this error because of wrong path. check your path twice carefully. Your "semantic" folder which has js and css files must be within public folder.
I have used the following to generate the CSS file:
<link rel="stylesheet" href="{{ asset('public/global/bower_components/bootstrap/dist/css/bootstrap.min.css') }}">
However, I see the css is not loading. From the view source, I see the below code which is not opening (404).
<link rel="stylesheet" href="http://127.0.0.1:8000/public/global/bower_components/bootstrap/dist/css/bootstrap.min.css">
But, if I remove the "public keyword" from the above path, its working.
I'm using php artisan serve in Ubuntu 16.04
<link rel="stylesheet" href="{{ public_path('global/bower_components/bootstrap/dist/css/bootstrap.min.css') }}">
<link rel="stylesheet" href="http://127.0.0.1:8000/global/bower_components/bootstrap/dist/css/bootstrap.min.css">
these two works. Because when 127.0.0.1:8000 load, it starts making the project from public path.
and asset(/path) is represent asset folder. You must change this with public_path
You can use asset() helper,
<link href="{{ asset('public/global/bower_components/bootstrap/dist/css/bootstrap.min.css') }}" type="text/css" rel="stylesheet">
I'm a new in Laravel and am trying to use the mix.version() in the Gulpfile.js in Laravel 5.3 for cache busting.
this is my gulpfile.js:
elixir(function (mix){
mix.less('custom.less');
mix.version('public/css/custom.css');
});
When running gulp command in my terminal, my less is compiled and versioned correctly, but when I try to include the the following line my view file, it breaks my view:
<link rel="stylesheet" type="text/css" href="{{ elixir('/css/custom.css) }}">
screenshot of my error
Is there a specific include or something I need to call in my view file to ensure the above line of code actually works? If I remove the above elixir line in my view code and hard code link my css file, then it works, but I can't leave it like that as I need versioning for cache busting.
Thanks so much, I have tried the documentation, but not examples exist of how to include the code in the view file.
There is a ' missing
<link rel="stylesheet" type="text/css" href="{{ elixir('/css/custom.css) }}">
should be
<link rel="stylesheet" type="text/css" href="{{ elixir('/css/custom.css') }}">
Regarding the question title
{{ elixir('/css/custom.css) }}
is causing the error not the mix.version()