时间戳

首页 > 解决方案 > 使用 Foundation 6 设置 Laravel 8

webpack - 使用 Foundation 6 设置 Laravel 8

问题描述

我目前正在尝试使用 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

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

标签： webpacksasszurb-foundationlaravel-8

解决方案

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

此时我们可以做两件事，要么直接在 node_modules 文件夹中引用 app.scss 中的该文件，要么将其复制到我们的 resources/assets/sass 文件夹。后来的选项更适合我们需要做很多调整的情况。现在让我们复制该文件，这样我们以后就不必在需要时深入挖掘 node_modules 了。

(c) 复制 /node_modules/foundation-sites/scss/settings/_settings.scss 到我们的 resources/assets/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

…ETC

推荐阅读