Laravel 5.4 添加 zurb 基础 6.3.0答案

【问题标题】：Laravel 5.4 adding zurb foundation 6.3.0Laravel 5.4 添加 zurb 基础 6.3.0
【发布时间】：2017-02-03 17:47:36
【问题描述】：

我想了解如何将 zurb 基础单个组件添加到我的新 laravel 项目中的最佳方法。

到目前为止我所做的是：

npm install foundation-sites --save

第二个是

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

到我的 layout.blade.php

我的问题是我应该写什么

sass/app.scss
webpack.mix.js

也许还有其他事情需要做？我只想使用标签组件...

<span class="label success">Hello world</span>

非常感谢！

【问题讨论】：

标签： laravel webpack zurb-foundation-6

【解决方案1】：

我解决了，看看：

https://laracasts.com/discuss/channels/tips/using-foundation-630-with-laravel-54

在resources/assets/sass/app.scss

在清除所有发现的内容后添加：

// Settings
@import "settings";

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

// Include Everything (True) for the Flex Grid :);
@include foundation-everything(true);

在resources/assets/js/bootstrap.js 中，查找require('bootsrap-sass'); 并将其删除。

转到此路径（使用文件资源管理器）node_modules\foundation-sites\scss\settings 并复制文件 _settings.scss

到新路径 resources\assets\sass ，您可以删除 _variables.scss 文件。

在代码编辑器中打开文件_settings.scss，修改第44行：

@import 'util/util';

到

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

在 webpack.mix.js 中

在项目的根目录中打开文件 webpack.mix.js。并评论或删除代码：

改变这个：

mix.js('resources/assets/js/app.js', 'public/js')
   .sass('resources/assets/sass/app.scss', 'public/css');

到这里：

mix.sass('resources/assets/sass/app.scss', 'public/css');
mix.combine([
    'node_modules/jquery/dist/jquery.min.js',
    'node_modules/foundation-sites/dist/js/foundation.min.js'
], 'public/js/app.js');

不要忘记添加初始化代码以运行 JavaScript

在您的页脚中：

<script> $(document).foundation();</script>

【讨论】：