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

Question

我最近开始使用 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，没有任何问题。

然而，今天，我意识到图形组件 (custom-select) 没有正确呈现。经过一些研究，我发现这是由于编译期间缺少 Autoprefixer 造成的，因此一些 css 属性没有添加到我的 bootstrap.min.css.

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

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

Answer 1

我猜你正在使用 npm 将 scss 转换为 css。

只需安装 postcss，它内置了 autoprefixer 插件。然后在命令行中代替 sass，您需要在命令行中使用 postcss 以转换为 css。请参考 https://www.npmjs.com/package/postcss#npm-run--cli

Answer 2

这与我面临的问题完全相同。所以我在互联网上看了很多，找到了解决这个问题的一种可能的方法。您可以使用 NPM (Node Package manager). Read this or this Article

解决此问题

你需要什么，

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

创建文章中提到的命令

在您的案例中添加您的 devDependencies node-sass autoprefixer onchange and postcss-cli

运行 npm install，（安装所有包后）

运行 npm start

我就是这样做的例如

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

Answer 3

你不能保持 bootstrap 和你的习惯 css 不同吗。按照传统，我们尝试通过使用另一种外部样式，用我们的自定义 css 覆盖 bootstrap，类似地，如果您想学习 sass，请尝试使用 sass 创建新的外部样式表，保持 bootstrap 代码不变，并在 bootstrap 导入下方添加您的自定义样式，仅包含 main.scss，其中包含您的自定义样式

Answer 4

在我全局安装 post-css 和 autoprefixer

之后

npm install -g postcss-cli autoprefixer

i 运行以下命令使用自动前缀重新加载我的 CSS 文件。

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

注意：一旦我完成了一个同时处理SASS CLI 和 Autoprefixer

的命令，我将更新此 post

Edit-1: 可以组合2个终端命令编译压缩Bootstrap SCSS, 然后运行 Autoprefixer 添加像这样的供应商前缀只需一个命令：

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

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

Use SASS (from command line) and Autoprefixer (for Bootstrap 4.x)

sass

twitter-bootstrap

autoprefixer

bootstrap-4