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

我最近开始使用scss文件，尤其是自定义文件引导程序.

为了编译我的 scss 文件（以及引导程序），我使用sass https://sass-lang.com/从命令行。

例子 ：

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

这样我就可以根据自己的喜好自定义引导程序，而不会出现任何问题。

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

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

但我找不到编译 Bootstrap 的解决方案（使用sass https://sass-lang.com/）使用自动前缀。

这与我面临的问题完全相同。所以我在互联网上查了很多，找到了解决这个问题的一个可能的解决方案。您可以使用以下方法解决此问题NPM https://www.npmjs.com/（节点包管理器）。读this https://medium.com/afosto/how-to-setup-a-bootstrap-project-like-bootstrap-does-it-3825a726b09a or 本文 https://medium.com/@brianhan/watch-compile-your-sass-with-npm-9ba2b878415b

你需要什么，

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

按照文章中提到的方式创建命令

添加您的devDependencies在你的情况下节点 sass https://github.com/sass/node-sass 自动前缀器 https://www.npmjs.com/package/autoprefixer onchange https://www.npmjs.com/package/onchange and postcss-cli https://www.npmjs.com/package/postcss-cli

Run npm install,（安装所有软件包后）

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