时间戳

首页 > 解决方案 > 使用 laravel 配置引导程序

laravel - 使用 laravel 配置引导程序

问题描述

我是 web 开发的新手，我刚刚安装了 laravel，我想使用 bootstrap 4 sass，但我不知道我是否理解正确的工作流程。

似乎 laravel 已经在 boostrap.js 文件中包含了 bootstrap 4。所以引导组件已经可以在刀片文件中使用，但是您知道如何正确配置它以便不包含所有组件吗？现在 app.scss 文件看起来像：

// Variables
@import 'variables';

// Bootstrap
@import '~bootstrap/scss/bootstrap';

但在“@import '~bootstrap/scss/bootstrap';” 它显示错误“无法解析目录'scss'”。

另外，如果我们需要添加自定义 css 或自定义引导组件，应该怎么做？例如，我们应该在 sass 文件夹中创建一个“style.scss”文件并在那里自定义引导组件？或者我们应该在 bootstrap components scss 文件中自定义 bootstrap 组件？

而且 js/app.js 文件默认已经有很多 js 代码，可能是因为 bootstrap 也包含 jQuery，这是 jQuery 代码？但是有必要包含所有这些js代码吗？

标签： laraveltwitter-bootstrap

解决方案

最好的方法是使用 Laravel Mix

Laravel Mix 提供了一个流畅的 API，用于使用几个常见的 CSS 和 JavaScript 预处理器为你的 Laravel 应用程序定义 Webpack 构建步骤。通过简单的方法链，您可以流畅地定义您的资产管道。例如：

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

webpack 使用名为Tree Shaking的方法 Tree Shaking是 JavaScript 上下文中常用的一个术语，用于消除死代码。所以你不用担心不必要的代码

另外，如果您希望自定义编译后的 CSS 的文件名，您可以将完整的文件路径作为第二个参数传递给 less 方法：

mix.less('resources/less/app.less', 'public/stylesheets/styles.css');

Laravel 也有一个预设命令，可以让你改变前端脚手架甚至删除它。

php artisan preset bootstrap4
yarn && yarn dev

请在这里阅读更多

推荐阅读