laravel - Laravel + Vue + app.scss:样式似乎没有使用?
问题描述
我正在尝试使用 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
我不明白的是resources/sass/app.scss
Vue 在哪里/如何使用。我曾尝试更改 _variables.scss 中的一些内容,例如基本字体大小和字体系列,但我没有看到任何地方反映的结果。同时,该文件显然正在被处理,npm run dev
因为例如,如果我引入了语法错误,该npm run dev
命令将报告它。
很抱歉,如果这些细节不足以回答我的问题,我会尽力而为。我对 Vue 不是很有经验。如果您还有什么需要了解的,请在评论中提问。
解决方案
该
npm run dev
命令将处理您webpack.mix.js
文件中的说明。通常,您编译的 CSS 将放置在 public/css 目录中:
npm run dev
webpack.mix.js
Laravel 的前端脚手架包含的文件将编译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
然后在某个视图中加载编译后的文件,就像使用 html 和 common 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>
标签的刀片模板中,您可以将其用作扩展其他视图的布局。
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
推荐阅读
- ruby-on-rails - Style/OptionalBooleanParameter:使用布尔参数定义方法时使用关键字参数
- javascript - 使用 Chakra.ui 在单页反应应用程序中为当前页面部分添加下划线
- r - 如何获得一辆汽车的mpg比其他汽车最低的概率?
- carousel - owl carousel 中的 href 无法在实时服务器上运行
- c# - 为什么我收到此 bool 方法的错误“并非所有代码路径都返回值”
- arrays - 将excel二维数组整数数据转换成systemverilog二维数组
- r - 在 R 中查找名称相似的向量(例如 *_pre 和 *_post)之间的差异
- javascript - 动漫 Js 和不透明度
- c# - 如何将 Object.GetValue 中的 Uint8Array 转换为 C# 中的 byte[]
- go - 难以消除将“\n”作为字符串分隔符。(哥朗)