Как мне использовать node-sass и sass-autoprefixer вместе? - PullRequest
Новая
       13

Как мне использовать node-sass и sass-autoprefixer вместе?

0 голосов
/ 12 февраля 2019

У меня есть код в 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"
}

В результате автоприставка не работает.

1 Ответ

0 голосов
/ 12 февраля 2019

Этот пакет не запускается из 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));
}
...