如何在下游定制中使用Bootstrap 4的工具链

Question

在theming page of the Bootstrap documentation之后，我可以在我的NPM项目中成功地将custom.scss文件编译成CSS，该项目遵循推荐的文件结构：

my-project/
├── scss
│   └── custom.scss
└── node_modules/
    └── bootstrap
        ├── js
        └── scss

但是，我对这个CSS输出不满意;我想利用Bootstrap使用的其他工具，例如autoprefixer和minifier。例如，我的custom.scss将编译然后输出custom.css和custom.min.css文件 - 就像在Bootstrap源文件夹中运行npm run css-minify-main一样。 Bootstrap的build tools documentation page甚至描述了如何做到这一点，但它没有说明将自定义SCSS集成到这个过程中。

作为一种潜在的解决方法，安装所有相同的devDependencies并将scripts从bootstrap/package.json复制到我的项目中不仅是多余的。它需要主动维护（例如，如果源是由npm更新，或者甚至跟踪Git仓库等），以确保所有版本都是最新的，以检查deps是否已被添加/删除，等等上。那么，有没有办法从my-project/而不是my-project/node_modules/bootstrap/源文件夹中运行那些确切的脚本？

Answer 1

您可以从项目package.json在Bootstrap的package.json中运行脚本。构建自定义CSS，然后运行另一个切换到/node_modules/bootstrap文件夹的脚本，并运行所需的Bootstrap npm脚本。

例如，在my-project/ package.json

"scripts": {
    "build-css": "node-sass ./scss/custom.scss -o public/css/ && npm run bootstrap-scripts",
    "bootstrap-scripts": "cd ../node_modules/bootstrap && npm-run-all css-prefix css-minify" 
    ...
},

唯一的另一种方法是复制项目中的Bootstrap脚本和依赖项，正如您所提到的那样，这是不可取的。

Answer 2

如果您想要使用和自定义引导工具链的快速无配置设置，您可以使用laravel-mix。它带有自动前缀，CSS / JS连接和缩小，实时重新加载和其他选项。基本上，它适用于laravel框架，但可以很容易地用于没有laravel的独立项目。