如何一起使用 node-sass 和 sass-autoprefixer？答案

【问题标题】：How do I use node-sass and sass-autoprefixer together?如何一起使用 node-sass 和 sass-autoprefixer？
【发布时间】：2019-07-05 19:13:30
【问题描述】：

我在package.json 中有代码，但我对实现它感到困惑。

这是我的代码

{
  "name": "nodesass",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "dependencies": {
    "node-sass": "^4.11.0"
  },
  "devDependencies":
    "sass-autoprefixer": "^1.0.1"
  },
  "scripts": {
    "sass": "node-sass -w scss/ -o dist/css/ --recursive --use sass-autoprefixer",
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

结果是自动前缀不工作。

【问题讨论】：

标签： javascript css npm sass package.json

【解决方案1】：

此软件包不是从 CLI 运行的。相反，您需要在 .scss 文件中使用它。

首先需要在相关的.scss文件中导入文件：

@import "../path/to/node_modules/sass-autoprefixer/scss/prefixes";

然后您可以在您的课程中使用[sass-autoprefixer][1] mixins：

.your-class {
  // use 'vp-' followed by the CSS property that you want to automatically prefix. Provide the value of the CSS property as the mixin parameter.
  @include vp-flex-flow(row wrap);
}

编译后，上面的.scss代码会生成如下的.css：

.your-class {
  -webkit-flex-flow: row wrap;
  -moz-flex-flow: row wrap;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
}

相同的逻辑可以应用于包支持的任何属性。例如：

.your-class {
  // Prefixes for `display: flex;`
  @include vp-display(flex);
  // Prefixes for `transform: skewX(50deg);`
  @include vp-transform(skewX(50deg));
}

【讨论】：