如何使用节点青菜和青菜,autoprefixer在一起吗?

问题描述 投票:1回答:1

我在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"
}

结果是autoprefixer不工作。

javascript css npm sass package.json
1个回答
0
投票

这个包不是从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));
}
© www.soinside.com 2019 - 2024. All rights reserved.