Laravel + Vue + app.scss：样式似乎没有使用？答案

【问题标题】：Laravel + Vue + app.scss: styles seem to be unused?Laravel + Vue + app.scss：样式似乎没有使用？
【发布时间】：2020-07-21 00:58:46
【问题描述】：

我正在尝试使用 Laravel 和 Vue 构建一个项目。我正在使用此处描述的前端脚手架：https://laravel.com/docs/7.x/frontend

$ composer require laravel/ui
$ php artisan ui vue

这会加载 Bootstrap 并创建一些 javascript 文件和 SCSS 文件：

-->resources
  |-->js
     |-->app.js
     |-->bootstrap.js
  |-->sass
     |-->_variables.scss
     |-->app.scss

这也对resources/views/welcome.blade.php进行了一些更改

我不明白 Vue 在哪里/如何使用 resources/sass/app.scss。我尝试更改 _variables.scss 中的一些内容，例如基本字体大小和字体系列，但我没有看到任何地方反映的结果。同时，该文件显然正在被npm run dev 处理，因为例如，如果我引入了语法错误，npm run dev 命令会报告它。

很抱歉，如果这些细节不足以回答我的问题，我会尽力而为。我对 Vue 不是很有经验。如果您还有什么需要了解的，请在 cmets 中询问。

【问题讨论】：

您必须使用<link href="{{ mix('css/app.css') }}" rel="stylesheet" type="text/css" />在某些视图中加载编译文件
谢谢！我知道它会像这样简单，但是 Laravel 文档并没有说清楚。如果您将此作为答案发布，我会将其标记为正确的。

标签： laravel vue.js sass

【解决方案1】：

Writing CSS

npm run dev 命令将处理您的webpack.mix.js 文件中的指令。通常，您编译的 CSS 将放在 public/css 目录中：

npm run dev

Laravel 前端脚手架中包含的 webpack.mix.js 文件将编译 resources/sass/app.scss SASS 文件。这个app.scss 文件导入一个 SASS 变量文件并加载 Bootstrap，它为大多数应用程序提供了一个很好的起点。您可以随意自定义 app.scss 文件，甚至可以通过配置 Laravel Mix 使用完全不同的预处理器。

简而言之，您在resources/sass/app.scss 文件中工作，然后使用npm run ... 进行编译，您将在/public/css/app.css 文件中获得生成的css。您可以在webpack.mix.js 文件中change/configure 。

然后在某个视图中加载编译后的文件，就像使用 html 和普通 css 一样：

<link href="/css/app.css" rel="stylesheet" type="text/css" />

但是如果你想利用其他 laravel 混合功能，你可以使用mix() 方法：

<link href="{{ mix('css/app.css') }}" rel="stylesheet" type="text/css" />

通常，css 会加载到具有 <html>、<head> 和 <body> 标记的刀片模板中，您可以将其用作扩展其他视图的布局。
即：

/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

【讨论】：