使用 laravel 配置引导程序答案

【问题标题】：configure bootstrap with laravel使用 laravel 配置引导程序
【发布时间】：2019-04-22 05:10:23
【问题描述】：

我是 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组件scss文件中自定义bootstrap组件？

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

【问题讨论】：

【解决方案1】：

最好的方法是使用 Laravel Mix

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

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

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

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

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

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

php artisan preset bootstrap4
yarn && yarn dev

请阅读更多here

【讨论】：