twitter-bootstrap - 如何使用 bootstrap 4 (sass) 正确设置 laravel

Question

我对将 bootstrap 4 与 sass 和 laravel 一起使用的正确方法有疑问？它等于只下载源文件并将它们放在公共(public)文件夹中还是最好使用 npm？

对于每种情况，使用 laravel 配置 Bootstrap 的正确过程是什么？

对于只下载源文件的情况，我们可以在/public/css/中创建一个 Bootstrap 文件夹，然后将源文件文件夹中的 sass 文件粘贴到那里？但是如何在html文件中导入css呢？

对于使用 npm 的情况，您知道一些有用的教程吗？看起来有很多方法，但是有一些推荐的方法可行吗？我在项目文件夹上使用命令 npm install bootstrap@4.0.0-beta.2 然后在 bootstrap.js 中将“bootstrap-sass”更改为“bootstrap”然后在 app.scss 中我更改第 3 个import to "@import "node_modules/bootstrap/scss/bootstrap"。我不知道这个过程是否正确，但如果正确，现在编辑布局，bootstrap css 文件我们应该这样做在 node_modules 中的 bootstrap 文件夹中？或者我们应该将该 bootstrap 文件夹复制到 public 文件夹或其他什么？

Answer 1

我是这样做的

首先，摆脱你不会再使用的东西

yarn 移除 bootstrap-sass

然后安装你需要的

yarn add bootstrap@4.0.0-beta.3 popper.js

现在打开resources/assets/bootstrap.js(与我们正在谈论的Bootstrap无关)

寻找

require('bootstrap-sass');

替换为

window.Popper = require('popper.js');
require('bootstrap');

然后转到resources/assets/sass/app.scss

寻找

@import "~bootstrap-sass/assets/stylesheets/bootstrap";

并将其替换为

@import "~bootstrap/dist/css/bootstrap";

就是这样!

您应该能够运行 yarn run dev 或 yarn run watch 并查看更改是否生效。