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

Question

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

为了编译我的scss文件（以及引导程序），我从命令行使用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";

这样，我可以毫无问题地自定义引导程序。

---

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

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

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

Answer 1

在我全局安装post-css之后autoprefixer

npm install -g postcss-cli autoprefixer

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

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

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

Edit-1：您可以组合 2 个终端命令并编译和缩小 Bootstrap SCSS，然后运行 ​​Autoprefixer 只需一个命令即可添加供应商前缀：

sass scss/theme.scss:assets/theme.min.css --style=compressed && postcss assets/theme.min.css --replace --use autoprefixer

Answer 2

这与我面临的问题完全相同。所以我在互联网上看了很多，找到了解决这个问题的一个可能的解决方案。您可以使用NPM（节点包管理器）解决此问题。阅读这篇或这篇文章

你需要什么，

创建 package.json 文件或运行 npm init

创建您在文章中提到的命令

devDependencies在你的情况下添加你的node-sass autoprefixer onchange和postcss-cli

运行npm install，（一旦安装了所有软件包）

跑 npm start

这就是我做的例子

包.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 文件夹结构