CODEWITHSUNDEEP
laravelvue.jssass
Bintz
Bintz

Reputation: 801

Laravel + Vue + app.scss: styles seem to be unused?

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.

Upvotes: 1

Views: 1314

Answers (1)

porloscerros Ψ
porloscerros Ψ

Reputation: 5078

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

Upvotes: 1

Related Questions