Laravel 5.4添加zurb Foundation 6.3.0 [英] Laravel 5.4 adding zurb foundation 6.3.0

问题描述

我想学习如何将zurb基础单一组件添加到新的laravel项目中的最佳方法.

i would like to learn the best way how to add zurb foundation single component to my fresh laravel project.

到目前为止，我所做的是:

What i have done so far is:

npm install foundation-sites --save

第二个是

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

到我的layout.blade.php

to my layout.blade.php

我的问题是我应该写什么

And my questions is what should i write in

1. sass/app.scss
2. webpack.mix.js

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

And maybe there is something else that needs to be done? I want to use label component only...

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

非常感谢您！

推荐答案

我解决了这个问题，请看:

i solve that ,look at :

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

在资源/资产/sass/app.scss 中

在清除所有内容后添加此内容:

add this after clear all what you find:

// 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'); 并将其删除.

in resources/assets/js/bootstrap.js, look for require('bootsrap-sass'); and remove it.

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

go to this path (with File Explorer) node_modules\foundation-sites\scss\settings and copy the file _settings.scss

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

打开在代码编辑器中打开文件 _settings.scss ，然后更改第44行:

Open the file _settings.scss in code editor , and change the line 44:

@import 'util/util';

到

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

在webpack.mix.js中

在项目的根目录中打开文件webpack.mix.js.并注释或删除代码:

open your file webpack.mix.js in the root of your project. and comment or remove the code:

更改此内容:

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>

这篇关于Laravel 5.4添加zurb Foundation 6.3.0的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！