包括 Laravel 的 app.scss 文件答案

【问题标题】：Including Laravel's app.scss File包括 Laravel 的 app.scss 文件
【发布时间】：2017-08-23 03:56:59
【问题描述】：

我想在 Laravel 5.4 中使用 Bootstrap。根据to the docs

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

如何包含app.scss 文件。即——如果这是一个app.css，我想将它链接到我的文档头部。但是，由于它是一个app.scss 文件，浏览器本身不会理解它（或者会？），我不确定 Larval 期望我们如何将它插入到页面中。

【问题讨论】：

app.scss 将使用 laravel mix 编译成 public/assets/app.css，但你仍然需要手动将文件添加到页面。
@Leo_Kelmendi 回复：“手动将文件添加到页面”——Laravel 是否有用于此的方法/API——或者是否打算使用链接标签。
laravel.com/docs/5.4/mix

标签： laravel webpack sass

【解决方案1】：

使用npm run dev 或npm run prod 之类的内容构建资产后，您将在public 树的某个位置获得一个普通的旧app.css 文件。之后，一点点

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

在您的刀片模板中，您应该一切顺利。

【讨论】：

【解决方案2】：

在您可以使用app.scss 之前，您需要将 scss 文件编译为 css 并将编译后的文件移动到您的 Laravel 项目根目录中的公共目录。

将编译后的 css 存储在哪里取决于您，大多数人将 css 存储在 public/css/app.css

您可以使用多种自动化工具来编译 app.scss，例如 Laravel mix、gulpjs、grunt 等。

要了解有关编译 scss 文件的更多信息，请从这里开始：https://laravel.com/docs/5.4/mix

但是，您不必经历所有这些过程才能在 Laravel Blade 中使用 Bootstrap

只需将引导文件（css、js）移动到 Laravel public 目录，然后像这样在刀片模板中使用。

<head>
    <title>Page Title</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="{{assets('css/bootsrap.css')}}" />
</head>

【讨论】：