twitter-bootstrap - 使用SASS(从命令行)和Autoprefixer(对于Bootstrap 4.x)

我最近开始使用 scss 文件，尤其是自定义 Bootstrap 。

要编译我的scss文件(以及 bootstrap )，我从命令行使用sass。

例子 :

sass /path/to/scss/bootstrap/mycustom.scss /path/to/css/bootstrap.min.css -t compressed -C --sourcemap=none

mycustom.scss 是这样的:

 $theme-colors: (
     "custom-primary": "...",
     "custom-secondary": "..."
 );
 ....
 ....
 @import "bootstrap";

这样，我可以毫无问题地自定义 bootstrap 。

但是，今天，我意识到图形组件(自定义选择)未正确呈现。经过一些研究，我发现这是由编译期间缺少 Autoprefixer 引起的，因此某些css属性未添加到我的 bootstrap.min.css 中。

我在Bootstrap文档中找到了这个:https://getbootstrap.com/docs/4.2/getting-started/build-tools/#autoprefixer

但是我找不到使用Autoprefixer编译Bootstrap(使用sass)的解决方案。

最佳答案

在我全局安装post-css和autoprefixer之后
npm install -g postcss-cli autoprefixer
我运行以下命令以使用autoprefixer重新加载我的CSS文件。
postcss assets/theme.css --replace --use autoprefixer
注意:一旦处理了一个同时处理SASS CLI和Autoprefixer的命令，我将更新此帖子。

编辑-1:您可以组合2个终端命令并编译和最小化Bootstrap SCSS，然后运行Autoprefixer来添加供应商前缀，只需一个命令即可:
sass scss/theme.scss:assets/theme.min.css --style=compressed && postcss assets/theme.min.css --replace --use autoprefixer

关于twitter-bootstrap - 使用SASS(从命令行)和Autoprefixer(对于Bootstrap 4.x)，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/54435999/