Twitter bootstrap 使用SASS（从命令行）和Autoprefixer（用于Bootstrap 4.x）

我最近开始使用scss文件，特别是用于自定义引导

为了编译我的scss文件（以及引导），我从命令行使用

例如：

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";

通过这种方式，我可以根据自己的喜好定制引导，没有任何问题

---

然而，今天我意识到图形组件（自定义选择）没有正确渲染。经过一些研究，我发现这是由于编译期间缺少Autoprefixer造成的，因此一些css属性没有添加到我的bootstrap.min.css

我在引导文档中发现了以下内容：

---

但是我找不到一个使用Autoprefixer编译引导程序的解决方案

我猜您正在使用npm将SCS转换为css

只需要安装内置autoprefixer插件的POSTSS。 然后代替命令行中的sass，您需要在命令行中使用postss来转换为css。

---

请参考

这正是我所面临的问题。因此，我在网上查阅了很多资料，找到了解决这个问题的一个可能的办法。您可以使用（节点包管理器）修复此问题。读或

你需要什么

创建package.json文件或运行

npm init

创建文章中提到的命令

在您的案例中添加您的

devdependency

，然后

运行

npm安装

，（安装完所有软件包后）

运行

npm启动

例如，我就是这样做的

package.json

{
  "name": "web_name",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "devDependencies": {
    "autoprefixer": "^9.4.2",
    "node-sass": "latest",
    "onchange": "^5.2.0",
    "postcss-cli": "latest"
  },
  "scripts": {
    "build:sass": "node-sass --output-style=expanded --source-map=true assets/scss/style.scss assets/css/style.css",
    "prefix": "npm run build:sass && postcss assets/css/style.css --use=autoprefixer --output=assets/css/style.css",
    "start": "onchange \"assets/scss/**/*.scss\" -- npm run prefix"
  },
  "browserslist": [
    "last 2 versions"
  ],
  "repository": {
    "type": "git",
    "url": "Repo/Path"
  },
  "keywords": [
    "SASS"
  ],
  "author": "Ismail Farooq",
  "license": "ISC",
  "homepage": "Path",
  "dependencies": {}
}

根结构

Sass文件夹结构

---

您不能让引导和自定义css保持不同吗。传统上，我们尝试使用另一种外部样式用自定义css覆盖引导，同样，如果您想学习sass，请尝试使用sass创建新的外部样式表，保持引导代码不动，在我全局安装了

post-css

和

autoprefixer之后，只包括main.scs，其中包含自定义样式，从而在引导导入下添加自定义样式

npm安装-g postsss cli autoprefixer

我运行以下命令，用autoprefixer重新加载CSS文件

postsss assets/theme.css--replace--use autoprefixer

注意：一旦我使用了一个同时处理SASS CLI和Autoprefixer的命令，我就会更新这篇文章

编辑-1:您可以组合两个终端命令，编译和缩小引导SCS，然后运行Autoprefixer，只需一个命令即可添加如下供应商前缀：

sass-scss/theme.scss:assets/theme.min.css--style=compressed&&postss-assets/theme.min.css--replace--use autoprefixer
有帮助吗？mmmmmmm没有，在提供的链接中也没有一个解决方案可用于更改工作流，或者只是想知道如何将autoprefixer与sass一起使用？如果可能，我更喜欢使用SASS和AutoprefixerHi，谢谢你的帮助。一些注意事项：1）我需要将CLI SASS编译器从更改为，对吗？2） 在我全局使用sass之前，它没有安装在单个项目中，我想继续这样使用它，如果可能的话3）可以不使用onchange包吗？我更喜欢在需要时手动编译scss文件请参见此处的示例@WhiteLine现在每次需要编译时都必须在命令上运行npm start 1）正确，Node sass基本上是一个将sass编译成css的节点包2）你的意思是什么，请你再清除一点3）一旦更改就检测你的文件更改我没有尝试手动编译，但我相信可以尝试更改package.json中的Script>Start命令。。。对于第2点），我的意思是，在我的web项目中，我不使用任何包管理器来维护我使用的各种库的依赖关系。我开始使用NPM下载SAS，并能够从终端使用它来编译web项目中的scss文件（都在网络文件夹中）。我在Mac上全局安装了sass，并指向我的网络文件夹中的各种web项目（其中包含我的所有web项目）每次编辑项目中的scss文件时，我都会手动编译scss文件。例如：
sass/path to network folder projects/project1/scss/main.scss/path to network folder projects/project1/css/main.css-t compressed-C--sourcemap=none
yeh但css流仍将是自上而下的，所以现在让引导程序不受影响在制作LiveLine时删除我们不想要的东西，但是OP想要一个合适的动态解决方案，这就是为什么他在这个问题上增加了悬赏。让我们看看whiteline想要什么谢谢。我正在使用这个解决方案！