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

时间:2019-01-30 08:16:24

标签: twitter-bootstrap sass bootstrap-4 autoprefixer

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

要编译我的scss文件(以及引导程序),我从命令行使用sass

示例:

append

mycustom.scss 是这样的:

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

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


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

我在Bootstrap文档中发现了此问题:https://getbootstrap.com/docs/4.2/getting-started/build-tools/#autoprefixer

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

4 个答案:

答案 0 :(得分:4)

这是我面临的完全相同的问题。因此,我在互联网上看了很多,找到了解决此问题的一种可能的解决方案。您可以使用NPM(节点软件包管理器)来解决此问题。阅读thisthis Article

您需要什么

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

按照文章所述创建命令

根据情况node-sass autoprefixer onchangepostcss-cli添加您的devDependencies

运行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": {
    "node-sass": "node-sass --output-style=expanded --source-map=true assets/scss/style.scss assets/css/style.css",
    "prefix": "postcss assets/css/style.css --use=autoprefixer --output=assets/css/style.css",
    "build:sass": "npm run node-sass && npm run prefix",
    "start": "onchange \"assets/scss/**/*.scss\" -- npm run build:sass"
  },
  "browserslist": [
    "last 2 versions"
  ],
  "repository": {
    "type": "git",
    "url": "Repo/Path"
  },
  "keywords": [
    "SASS"
  ],
  "author": "Ismail Farooq",
  "license": "ISC",
  "homepage": "Path",
  "dependencies": {}
}

根结构

enter image description here

Sass文件夹结构

enter image description here

答案 1 :(得分:1)

在我全局安装post-cssautoprefixer

之后

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

答案 2 :(得分:0)

我想您正在使用npm将scss转换为css。

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

答案 3 :(得分:0)

您不能将引导程序和自定义CSS保持不同。传统上,我们尝试使用另一种外部样式覆盖自定义CSS的引导程序,类似地,如果您想学习sass,请尝试使用sass创建新的外部样式表,保持引导程序代码不变,并在引导程序导入下添加自定义样式,方法是仅包括main.scss,其中包含您的自定义样式