Question

我是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”文件，并在其中自定义引导程序组件吗？还是应该在引导程序组件scss文件中自定义引导程序组件？

并且默认情况下，js / app.js文件已经有很多js代码，也许是因为引导程序还包括jQuery，这是jQuery代码吗？但是有必要包括所有这些js代码吗？

Answer 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