开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

Laravel Mix Bootstrap字体的Url不正确

Laravel Mix是一个前端构建工具，用于在Laravel项目中编译和打包前端资源。Bootstrap是一个流行的前端框架，用于快速构建响应式网站和应用程序。在使用Laravel Mix和Bootstrap时，可能会遇到字体的URL不正确的问题。

字体的URL不正确可能是由于文件路径配置错误或者字体文件缺失导致的。为了解决这个问题，可以按照以下步骤进行操作：

确保字体文件存在于正确的路径下：首先，检查Bootstrap字体文件是否存在于项目的字体文件夹中。通常，Bootstrap的字体文件位于node_modules/bootstrap/fonts/目录下。确保这些字体文件已经正确地复制到了项目的字体文件夹中。
配置正确的字体文件路径：在Laravel Mix的配置文件中，可以通过修改webpack.mix.js文件来配置字体文件的路径。在mix.copy()方法中，将字体文件的源路径和目标路径进行配置。例如，如果字体文件位于resources/fonts/目录下，可以使用以下代码将字体文件复制到public/fonts/目录下：

mix.copy('resources/fonts', 'public/fonts');

确认字体文件的URL正确：在使用Bootstrap时，可以通过修改Bootstrap的变量文件来配置字体文件的URL。在resources/sass/_variables.scss文件中，可以找到$icon-font-path变量，将其值设置为正确的字体文件URL。例如，如果字体文件位于public/fonts/目录下，可以使用以下代码来配置：

$icon-font-path: "/fonts/";

重新编译前端资源：完成上述步骤后，运行Laravel Mix的编译命令来重新编译前端资源。在终端中运行以下命令：

npm run dev

这将重新编译前端资源并将字体文件复制到指定的目录中。

总结：在使用Laravel Mix和Bootstrap时，如果遇到字体的URL不正确的问题，可以通过确认字体文件的存在、配置正确的字体文件路径和URL，并重新编译前端资源来解决该问题。

推荐的腾讯云相关产品：腾讯云CDN（内容分发网络）可以加速字体文件的传输，提高网站的访问速度。您可以通过腾讯云CDN产品了解更多信息：腾讯云CDN。

相关搜索:<template />上的Laravel Mix Vuejs组件语法错误 babel动态导入和laravel-mix的问题 bootstrap的表属性不正确 bootstrap选择框中的字体 JS文件不加载使用的是Webpack，Laravel Mix in Laravel 8 Laravel 5.4 Mix忽略SCSS中的img Laravel Mix -如何观察多个入口点的变化 Laravel mix -更改编号js文件的输出目录 Laravel Mix不发出我的JS函数 laravel mix中的Datatable

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

CSS 预编译语言 Sass 快速入门教程

Mix 进行前端资源的编译，当我们通过 npm install 安装 laravel-mix 的过程中，系统会自动安装 laravel-mix 声明的依赖，其中就包括了编译 Sass 所需要的 node-sass...，我们无需再额外安装这个扩展包，这些事情 Laravel Mix 在底层默默帮我们完成了。...导入 Sass 支持通过 @import 指令导入其它 Sass 文件，既可以导入本地开发文件，也可以导入前端依赖库中的文件，还可以导入网络字体文件，以 Laravel 自带的 resources/sass...family=Nunito'); // Variables @import 'variables'; // Bootstrap @import '~bootstrap/scss/bootstrap'...Mix 编译的时候将其编译到指定的 CSS 文件中。

7.1K4 1

在 Laravel 项目中使用 Bootstrap 框架

1、Laravel 如何引入 Bootstrap 如官方文档所言，Laravel 并不强制你使用 CSS 框架，但是开箱提供了对 Bootstrap 的支持，在 resources/js/bootstrap.js...5.5 开始 Laravel 使用的 Bootstrap 版本就是 4....Laravel Mix 是对 Webpack 进行封装后提供给 Laravel 项目使用的前端打包工具，Webpack 是目前最新的、广泛使用的前端资源打包工具（之前还有 Grunt、Gulp 等），能够以模块方式处理所有前端资源...后面我们会专门讲一下 Laravel Mix 的各种使用，现在你只需要知道它是怎么回事就好了。...Laravel Mix 的配置文件就是项目根目录下的 webpack.mix.js： const mix = require('laravel-mix'); mix.js('resources/js/

3.4K3 1

将博客主题替换成 Clean Blog

js 文件变成最终可以引入到 HTML 文档的文件，还需要在 blog 根目录下新建 webpack.mix.js，通过 Laravel Mix 来编译打包这些预处理 js 文件： const mix...= require('laravel-mix') mix.js('resources/js/app.js', 'public/js'); 上述代码的含义是引入 Laravel Mix，然后通过它提供的.../scss/bootstrap"; @import "~startbootstrap-clean-blog/scss/clean-blog"; 引入的样式资源包含 Bootstrap 以及 Clean...然后在 webpack.mix.js 中补充对应的处理逻辑： const mix = require('laravel-mix') mix.js('resources/js/app.js', 'public...-- Page Header --> <div

7242 0

laravel 获取当前url的别名方法

'xiong.test', 'uses' = 'XiongTestController@index' ]); 以上路由为例在模版中可以使用route(‘xiong.test’)来获取该路由的真实地址...Routing\Route; public function index(Request $request,Route $route) { echo $route- getName(); } 以上这篇laravel...获取当前url的别名方法就是小编分享给大家的全部内容了，希望能给大家一个参考。

1.6K3 1

如何修改Laravel中url()函数生成URL的根地址

前言本文主要给大家介绍了修改Laravel中url()函数生成URL的根地址的相关内容，相信大家都晓得 Larevel 的一票帮助函数中有个 url()，可以通过给予的目录生成完整的 URL，是非常方便的一个函数...： // return: url('user/profile') 但是这玩意生成的 URL 中要补完的部分是框架内部根据 Request 自动判断的，而自动判断出的东西有时候会出错（譬如在套了一层反向代理之类的情况下...UrlGenerator::class); } return app(UrlGenerator::class)->to($path, $parameters, $secure); } 可以看到，它从 Laravel...修改 url() 函数生成的 URL 中的根地址的代码如下： // 用它提供的方法检测 URL 是否有效 if (app('url')->isValidUrl($rootUrl)) { app('url...所以说啊，要真正掌握 Laravel 的那些东西，光看文档还是不够的。而且 Laravel 的源码文档做的很不错，读起来很清晰，能学到不少东西。

3.3K3 0

页面布局（下）：引入 Tailwind CSS 框架构建博客应用 UI 界面

基于 Laravel Mix 引入 Tailwind 在 Laravel 项目中，我们可以基于 Lavavel Mix 快速引入 Tailwind CSS 框架，开始之前，先安装 laravel-mix-tailwind...这个前端依赖包： npm install laravel-mix-tailwind --save-dev 安装完成后，需要在项目根目录下的 webpack.mix.js 中引入它： const mix...= require('laravel-mix'); require('laravel-mix-tailwind'); ......(); 由于 laravel-mix-tailwind 依赖 tailwind.js，所以还需要通过如下命令初始化 Tailwind： npx tailwindcss init 如果上述命令运行报错...推荐一个不错的 Tailwind 组件素材库 —— Tailwind Components，在这里，你可以按需搜索自己想要的组件：相应的源代码都可以免费拷贝过来使用（不同于 Bootstrap，Tailwind

2.6K2 0

Homestead + laravel-mix 环境下 hmr 的两种玩法

我在前几天刚写过的《让 F5 歇一会儿——laravel-mix 自动刷新之道》[1]中介绍了 laravel-mix 实现自动刷新的几种方法，其中就有涉及 hmr（Hot Module Replacement...对于 Laravel 官方首推的 Homestead 当然也是可以的，只不过用法上有些差别，于加上 laravel-mix 本身的一些 BUG（在 issue 里搜索 hmr 结果就有好几页 :smile...yarn run hot，然后在浏览器中使用绑定的测试域名（如：laravel.test）访问4....（虽然可以考虑在宿主机全局安装依赖，但诸如 eslint-config-xxx 之类的项目相关的包也全局安装，必然造成混乱）如同学习很多其它新工具新玩法一样，刚开始折腾 laravel-mix 时总是磕磕绊绊...References [1] 《让 F5 歇一会儿——laravel-mix 自动刷新之道》: https://tianyong90.com/2019/04/12/rang-f5-xie-yi-hui-er-laravel-mix-zi-dong-shua-xin-zhi-dao

1.6K1 0

【玩转腾讯云】已有laravel 添加vue

package.json "devDependencies": { "axios": "^0.17", "bootstrap-sass": "^3.3.7", "browser-sync": "^...": "^1.1.6", "laravel-elixir-vue-2": "^0.3.0", "laravel-elixir-webpack-official": "^1.0.10", "laravel-mix...'); require('laravel-elixir-webpack-official'); require('laravel-elixir-vue-2') elixir((mix) => { mix.sass...('app.scss') .webpack('app.js'); }); webpack.mix.js let mix = require('laravel-mix'); mix.js('...S 安装vant cnpm i vant -S 安装 babel-plugin-import 插件，babel-plugin-import 是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式

3.6K3 0

laravel 先orderBY再groupby，导致分组后的排序不正确

//联系过我的经纪人 $appletChats=$this->AppletChat->orderBy('created_at','desc')->where([['user_id

8901 0

laravel5.4+vue+element简单搭建(gulp+laravel Elixir)(转)

env.example里的内容复制到.env文件中 4.生成key，命令行：PHP artisan key:generate 5.配置文件package.json，内容如下： { "private"...1.0.3", "vue-router": "^2.1.1", "vue-template-compiler": "^2.1.4", "axios": "^0.15.2", "bootstrap-sass...": "^3.3.7", "jquery": "^3.1.0", "laravel-mix": "^0.5.0", "lodash": "^4.16.2" }, "dependencies.../bootstrap'); /** * Next, we will create a fresh Vue application instance and attach it to * the page...中有一个更简单的方法，是使用Mix，配置详情请参照 http://laravelacademy.org/post/6798.html

1.6K3 0

Laravel中运行Gulp任务的利器（一） —— Laravel Elixir简介及入门教程

Laravel的宗旨是让PHP开发变得轻松愉悦，所以从Laravel 5开始，提供了一个新的被称作LaravelElixir的API。...正如你所看到的，Laravel项目默认需要两个Node包： gulp 和 laravel-elixir 。...在该文件中，可以看到一个Gulp任务示例： elixir(function(mix) { mix.less('app.less');}); mix.less 任务可以用于编译Less文件，在本例中该文件名为...app.less ，这个文件位于 resources/assets/less 目录下，其内容如下： @import "bootstrap/bootstrap";@btn-font-weight: 300...) { mix.less('app.less'); mix.coffee();}); 此外，你还可以直接使用方法链到命令上： elixir(function(mix) { mix.less

2K9 1

Laravel 之url参数,获取路由参数的例子

如下所示： echo '<pre '; var_dump( $request- url() ); // url echo '</pre '; echo '<pre...echo '<pre '; var_dump( Input::get() ); // query string echo '</pre '; 路由参数：可获取在web.php 中规定的参数如...HomeController@clist’)- middleware( ‘test’ ); 获取参数： request- route( ’email’ ); or request- email; 以上这篇Laravel...之url参数,获取路由参数的例子就是小编分享给大家的全部内容了，希望能给大家一个参考。

6.1K2 1

【Laravel系列7.8】广播系统

Laravel 队列监听处理后的内容会到 laravel-echo-server 中，并由 laravel-echo 的服务端进行对前端的广播。...安装完成之后，需要去修改一下 resources/assets/js/bootstrap.js 。在这个文件中，已经包含了一套注释的 Echo 配置，我们需要打开注释并修改成下面这样。..., // cluster: process.env.MIX_PUSHER_APP_CLUSTER, // forceTLS: true }); 注意，注意，注意，重要的事情说三遍，现在这里是有坑的哦...修改完成之后，我们需要使用 Laravel 默认的 mix 工具来编译一下前端代码，最后需要加载的文件实际上是 public/js/app.js ，直接使用下面的命令行进行编译即可。...所以我们需要降低版本，最简单的方式是注释掉 bootstrap.js 中引入 socket.io 的那一行。

2.2K2 0

引入 SB Admin 2 作为后台管理系统主题

文章列表页这里我们引入了基于 Bootstrap 框架的 SB Admin 2 作为后台管理系统的主题，你可以从 Start Bootstrap 网站预览并下载这个主题，或者通过 NPM 来下载安装...，这里引入 SB Admin 2 提供的 Sass 源代码即可： @import "~startbootstrap-sb-admin-2/scss/sb-admin-2"; 通过 Laravel Mix...编译前端资源做好以上准备工作后，就可以在 webpack.mix.js 中将上述资源文件编译打包为对应的 JavaScript 和 Css 代码了： const mix = require('laravel-mix...') // 编译前台资源 ... // 编译后台资源 mix.js('resources/js/admin.js', 'public/js/admin.js') .js('resources/...js/chart.js"> 完整视图模板代码可以在本项目 Github 仓库中获取：https://github.com/nonfu/master-laravel-code

4.1K1 0

关于laravel模板中生成URL的几种模式总结

1.通过url辅助函数（路由）生成： location.href = "{{url('user/index2')}}"; 或者： location.href = "{{url::to('user/index2...')}}"; 2.通过别名（路由）生成，前提是在注册路由的时候要指定别名，例如： Route::get('user/index2',['as' = 'user/index2', 'uses' =...'UserController@index1']); location.href = "{{route('user/index2')}}"; 或者： location.href = "{{URL::route...::action('UserController@index2',['id'= 1,'author'= 'admin'])}}"; 当然2，3中携带的参数都可以在控制器中使用 Request $request...接受以上这篇关于laravel模板中生成URL的几种模式总结就是小编分享给大家的全部内容了，希望能给大家一个参考。

5924 2

前后端分离探索——MVC 项目升级的一个过渡方案

# 前言 # 项目环境后端框架：Phalcon 前端框架：Bootstrap + jQuery # 什么是前后端分离？...传统 MVC 项目直接升级到前后端分离需要大量的时间与人力，在业务多变的阶段并不适合，所以便有了本文的过渡方案探索路由先不分离，仍然采用 PHP 提供的路由模板部分分离，在原 PHP 模板中，引入...+ jQuery + Vue 前端编译使用 Laravel Mix 工具，这会节省大量前端配置时间根目录新建文件 webpack.mix.js const fs = require('fs');...const mix = require('laravel-mix'); const rs_root = 'public/mix/resources'; // 资源源目录 const rs_output...9 10 11 # laravel-mix 配置 const path = require('path') const mix = require('laravel-mix') const rs_root

1.2K2 0

网站发布后bootstrap字体图标不显示的解决方法

网站发布到IIS后，发现网站使用的Bootstrap框架所引用的woff字体无法正常显示。...于是跟踪http请求，发现woff字体请求出现GET .woff 404 (Not Found)的问题，但是项目中woff字体的文件并未丢失。...后经排查，原来是服务器上IIS没有添加woff字体的MIME类型，导致发送HTTP请求时，IIS无法处理和识别此类型的文件。

1.6K2 0

引入 Laravel Mix 管理前端资源

如果要完整介绍并构建这样的一套前端开发环境，需要引入很多额外的篇幅和前端知识，好在 Laravel 生态提供了一个 Laravel Mix 组件，该组件对 Webpack 的构建步骤做了封装，提供了一套非常简单的流式...虽然该项目是针对 Laravel 框架开发的，不过，由于是一个纯前端项目，因此可以适用于所有 Web 前端项目，现在，我们就来在博客项目中引入 Laravel Mix 管理前端资源。...安装 Laravel Mix 开始之前，需要先安装 Laravel Mix 组件需要的前端相关依赖，假设你的系统上已经安装过 Node 和 NPM 包管理器，如果没有安装的话前往 Node.js 官方下载页面...": "^5.0.1", "lodash": "^4.17.13", "resolve-url-loader": "^3.1.0", "sass": "^1.15.2",...这样一来，我们就可以在项目中基于 Laravel Mix 管理前端资源了。下篇教程，我们将基于 Laravel Mix 为博客项目替换主题。（全文完）

1.6K2 0

Laravel框架下载，安装及路由操作图文详解

目录二：bootstrap 这个目录主要是用来存放所有的第三方代码，包括框架函数源码（/vendor/laravel）、插件和扩展等。 ?...里面还有些具体的文件介绍请附录：laravel目录结构介绍这里我就不做多介绍了 NO.3 Laravel路由路由的使用首先，我们要先打开Laravel目录的app目录，再点击APP目录里的http.../Http/Controllers 存放控制器文件 app/Http/Middleware 存放「中间件」文件 bootstrap 框架启动与自动加载设置相关的文件 composer.json 应用依赖的扩展包...用于定义 Artisan 命令 routes/web.php 用于定义 Web 类型的路由（重点，大部分情况下本书会用到） server.php 使用 PHP 内置服务器时的 URL 重写（类似于 Apache...目录被用于保存框架生成的文件及缓存 storage/logs 应用程序的日志文件 tests 应用测试相关文件 vendor Composer 依赖模块 webpack.mix.js Laravel

4.6K5 1

Laravel 入门项目博客系列教程全部更新完了！

博客是 Web 1.0 的产物，也是 Web 应用中最基础、最简单的应用形态，是静态页面与动态网站最早的分水岭，所以我们从这里出发，开启基于 Laravel 框架构建 Web 应用之旅。...本博客项目后端基于 Laravel 5.7 开发（兼容 Laravel 5.5、5.6），前端资源基于 Laravel Mix 进行管理，采用全新的 Bootstrap 4 渲染 CSS，学院君的本地开发环境默认是...你既可以把它当做小试牛刀的练手项目，也可以把它当做入门 Laravel 框架的学习项目。...整个项目包含前台博客展示、用户评论和后台管理等功能，通过这个项目的学习和开发，入门 Laravel 框架完全没有问题：创建项目和测试驱动开发十分钟内完成博客应用搭建构建博客后台管理系统在后台实现文章标签增删改查...以下是博客应用的部分截图：首页：详情页：评论框：联系我们：管理后台： ?

1.5K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭