使用 Foundation 6 设置 Laravel 8答案

【问题标题】：Setup Laravel 8 with Foundation 6使用 Foundation 6 设置 Laravel 8
【发布时间】：2021-01-02 12:05:03
【问题描述】：

我目前正在尝试使用 Laravel 介绍自己，但在页面前端部分遇到了一个关于 Foundation Sites 的奇怪错误。

默认情况下，Laravel 使用引导程序设置代码，所以我认为我需要做的就是通过基础站点的东西切换引导程序。

我正在做这里http://somethingnewtutorial.blogspot.com/2017/07/using-foundation-6-with-laravel-5.html 中提到的所有事情，但不知何故，当我将我的app.scss 文件编译为css 时，我得到的只是版权，但根本没有CSS。

这是我的app.scss：

// Fonts
@import url('https://fonts.googleapis.com/css?family=Nunito');

// Variables
@import 'settings';

// Foundation
@import '~foundation-sites/scss/foundation';

这是npm run dev的输出

@import url(https://fonts.googleapis.com/css?family=Nunito);/**
 * Foundation for Sites
 * Version 6.6.3
 * https://get.foundation
 * Licensed under MIT Open Source
 */

就是这样。如您所见，包含版权，因此找到了该文件。如果我在下面输入一些简单的 CSS 规则，它们也会被包括在内，但不包括 mixins（尽管 bootstrap 也使用它们并且工作正常！）但是，如果我将它改回 bootstrap，如下所示：

// Fonts
@import url('https://fonts.googleapis.com/css?family=Nunito');

// Variables
@import 'settings';

@import '~bootstrap/scss/bootstrap';

我的app.css 看起来还不错

@import url(https://fonts.googleapis.com/css?family=Nunito);@charset "UTF-8";

/*!
 * Bootstrap v4.5.2 (https://getbootstrap.com/)
 * Copyright 2011-2020 The Bootstrap Authors
 * Copyright 2011-2020 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
 */

:root {
  --blue: #007bff;
  --indigo: #6610f2;
  --purple: #6f42c1;
  --pink: #e83e8c;
  --red: #dc3545;
  --orange: #fd7e14;
  --yellow: #ffc107;
  --green: #28a745;
  --teal: #20c997;
  --cyan: #17a2b8;
  --white: #fefefe;
  --gray: #6c757d;
  --gray-dark: #343a40;
  ...

我的控制台也没有报告任何错误

> @ development C:\inetpub\wwwroot\laravel\blog
> cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js

98% after emitting SizeLimitsPlugin

 DONE  Compiled successfully in 3594ms                                                                                                                                                                                19:01:11

       Asset       Size   Chunks             Chunk Names
/css/app.css  170 bytes  /js/app  [emitted]  /js/app
  /js/app.js   1.56 MiB  /js/app  [emitted]  /js/app

所以，我很确定我错过了一些关于它的东西，但我不知道它是什么。

【问题讨论】：

标签： webpack sass zurb-foundation laravel-8

【解决方案1】：

我认为您错过了 tute @ [http://somethingnewtutorial.blogspot.com/2017/07/using-foundation-6-with-laravel-5.html][1] 的这一部分：

此时我们可以做两件事，要么在我们的 app.scss 直接放在 node_modules 文件夹或复制到我们的资源/资产/sass 文件夹。后来的选择更适合我们需要做很多调整的情况。让我们复制那个文件现在这样我们以后就不必深入研究 node_modules 了需要它。

(c) 复制 /node_modules/foundation-sites/scss/settings/_settings.scss 到我们的资源/资产/sass

(d) 在我们的app.scss 中引用此文件

删除这一行

// 变量 @import "variables";

替换为

// 基础设置 @import "settings";

此时我们可以删除文件_variables.scss

(e) 由于我们将 _settings.scss 文件复制到我们方便的位置，让我们编辑这个文件。

改变这一行

@import 'util/util';

用这个，这样就可以正确引用了

@import "node_modules/foundation-sites/scss/util/util";

(f) 从这里我们可以根据需要创建其他 SCSS 文件在我们的 app.scss 中导入它

…等

【讨论】：