npm с node-sass и autoprefixer

Я использую node-sass для компиляции всех моих файлов Sass в master.css. Это хорошо работает, но теперь я хочу добавить префиксы. Я хотел бы использовать только npm, без Gulp или Grunt.

Вот мой файл package.json:

{
  "name": "xxxxxx.com",
  "version": "1.0.0",
  "description": "",
  "watches": {
    "sass": "src/scss/**"
  },
  "scripts": {
    "sass": "node-sass src/scss/master.scss -o dist/css/ --style compressed",
    "prefix": "postcss --use autoprefixer dist/css/master.css -d dist/css/master.css",
    "dev": "rerun-script"
  },
  "author": "Jan",
  "license": "ISC",
  "devDependencies": {
    "autoprefixer": "^6.3.1",
    "browserify": "^13.0.0",
    "clean-css": "^3.4.9",
    "node-sass": "^3.4.2",
    "postcss-cli": "^2.5.0",
    "rerun-script": "^0.6.0",
    "uglifyjs": "^2.4.10"
  }
}

Я не могу запустить его. Использую autoprefixer и postcss-cli. Модули были установлены локально в каталог проекта. Я считаю, что моя часть "сценария" ложна. Как бы это выглядело правильно?


node.js npm node-sass compilation autoprefixer
person QJan84    schedule 04.02.2016    source источник

Ответы (3)


arrow_upward
36
arrow_downward 

 {
    "name": "npm-node-sass",
    "version": "0.0.1",
    "devDependencies": {
        "autoprefixer": "^6.3.3",
        "browserify": "^13.0.0",
        "cssnano": "^3.5.2",
        "jshint": "^2.9.1",
        "node-sass": "^3.4.2",
        "postcss": "^5.0.16",
        "postcss-cli": "^2.5.1",
        "watch": "^0.17.1"
    },
    "scripts": {
        "prebuild:css": "node-sass --include-path scss src/sass/styles.scss    public/css/styles.css",
        "build:css": "postcss --use autoprefixer -b 'last 2 versions' < public/css/styles.css | postcss --use cssnano > public/css/styles.min.css",
        "lint": "jshint src/js/*.js",
        "build:js": "browserify src/js/main.js > public/js/bundle.js",
        "build": "npm run build:css && npm run build:js",
        "prebuild:js": "npm run lint",
        "build:watch": "watch 'npm run build' src/*"
    }
}

Вам нужны postcss и postcss-cli как devDependency.

person Maurice van Cooten    schedule 21.02.2016
comment
будет ли это перестраивать все файлы каждый раз, когда файл редактируется? - person Yukulélé; 19.12.2017
comment
Здравствуйте, как в этой строчке добавить еще версий автопрефикса? build: css: postcss --use autoprefixer -b 'последние 2 версии' ‹public / css / styles.css | postcss --use cssnano ›public / css / styles.min.css. Например, я хочу добавить последнюю версию ie11 и chrome. В моем случае я использую Windows, поэтому мне нужно было избегать таких кавычек: build: css: postcss --use autoprefixer -b \ last 2 version \ ‹css / styles.css | postcss - использовать cssnano ›css / styles.min.css, С уважением - person Gabriel B.; 29.07.2019

arrow_upward
3
arrow_downward

Sass с Node Js (с автопрефиксом)

npm i -D autoprefixer clean-css-cli node-sass postcss-cli

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "dependencies": {
    "autoprefixer": "^9.5.1",
    "browserslist": "^4.5.4",
    "clean-css-cli": "^4.3.0",
    "node-sass": "^4.11.0",
    "postcss": "^7.0.14",
    "postcss-cli": "^6.1.2"
  },
  "devDependencies": {},
  "scripts": {
    "clean": "rimraf scss",
    "compile": "node-sass --output-style=expanded --source-map=true css/scss/main.scss css/scss/main.css",
    "prefix": "postcss css/scss/main.css --use=autoprefixer --map=false --output=css/scss/main.css",
    "minify": "cleancss --level=1 --source-map --source-map-inline-sources --output css/scss/main.min.css css/scss/main.css",
    "dev": "npm run compile -- --watch",
    "build": "npm run clean && npm run compile && npm run prefix && npm run minify",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "browserslist": [
    "last 4 version"
  ],
  "author": "",
  "license": "ISC"
}

Команда терминала для сборки: npm run build

person Jay Ukani    schedule 10.09.2019
comment
Как бы вы добавили скрипт 'prefix' после того, как 'dev' скомпилировал scss? Я пробовал это так: "compile": "node-sass --output-style=expanded --source-map=true css/scss/main.scss css/scss/main.css && npm run prefix" но, похоже, до префиксного скрипта так и не дошло - person Barleby; 18.09.2019

arrow_upward
2
arrow_downward

Допустим, у нас есть файл styles.sass в каталоге sass. Я использовал что-то вроде этого (мой package.json):

{
 "scripts": {
    "c":"node-sass sass/styles.sass -o .|postcss styles.css -u autoprefixer -r",
    "w":"watch 'npm run c' sass"
 }
}

команда терминала: npm run w. На этом этапе при каждом сохранении файла styles.sass будет автоматически создаваться скомпилированный файл styles.css с префиксом. У меня глобально установлены пакеты postcss-cli, node-sass и watch.

person daGo    schedule 04.06.2018