Question

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

结果是自动前缀不起作用。

Answer 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));
}

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

1 个答案: