时间戳

首页 > 解决方案 > 如何一起使用 node-sass 和 sass-autoprefixer？

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

问题描述

我有代码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"
}

结果是自动前缀不工作。

标签： javascriptcssnpmsasspackage.json

解决方案

此包不是从 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));
}

推荐阅读