使用Foundation 6设置Laravel 8

问题描述

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

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

我正在执行此处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（尽管引导程序也可以使用它们并且可以正常工作！）但是，如果我将其改回引导程序，则如下所示：

// 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

所以，我很确定我错过了一些事情，但是我不知道它是什么。

解决方法

我认为您错过了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 到我们的资源/资产/资产

（d）在我们的app.scss

中引用此文件

删除此行

//变量@import“变量”;

并替换为

//基础设置@import“设置”；

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

（e）由于我们将_settings.scss文件复制到了我们方便的位置， 让我们编辑此文件。

更改此行

@import'util / util';

与此，以便它可以正确引用

@import“ node_modules / foundation-sites / scss / util / util”;

（f）至此，我们可以根据需要创建其他SCSS文件，并 将其导入我们的app.scss

…等等