Как скомпилировать scss в css с помощью node-sass

У меня есть master.scss со многими импортированными из других файлов .scss. Если я изменю файл * .scss, master.css будет сгенерирован автоматически.

Я использую только NPM, без Gulp или Grunt! Так и должно быть.

Мой текущий сценарий сборки:

"scripts": {
  "watch-sass": "sass --watch src/scss/master.scss:dist/css/master.css"
}

Это хорошо, но на компиляцию уходит много времени!

Теперь я пытаюсь использовать node-sass. Он должен компилироваться очень быстро. К сожалению, я не совсем понимаю ... node-sass установлен, через npm install node-sass

Где я могу использовать следующее (из документов)?

var sass = require('node-sass');
sass.render({
  file: scss_filename,
  [, options..]
}, function(err, result) { /*...*/ });
// OR
var result = sass.renderSync({
  data: scss_content
  [, options..]
});

Это не так в package.json, верно?

Вот учебник, который я прочитал: Использование NPM в качестве средства выполнения задач

Сценарий хороший. Как я могу это использовать?

"scripts": {
  "sass": "node-sass sass/ -o build/css/"
}

Это скомпилирует все файлы sass (которые не начинаются с подчеркивания) в каталог build / css /.

Я надеюсь на вашу помощь!


node.js npm css sass node-sass
person QJan84    schedule 20.01.2016    source источник

Ответы (3)


arrow_upward
7
arrow_downward

Возможно, это покрывает ваш вопрос: Как скомпилировать или преобразовать sass / scss в css с помощью node-sass (без Ruby)?

Если это вариант для вас, я бы порекомендовал использовать grunt, он упростит и ускорит работу. Этот плагин grunt, вероятно, лучший вариант: https://www.npmjs.com/package/grunt-contrib-sass

// ОБНОВИТЬ

Я следил за отправленным вами учебником, и он очень прост. Вы создаете в корневой папке файл с именем package.json, содержащий следующее:

{
  "watches": {
    "sass": "sass/**"
  },
  "scripts": {
    "sass": "node-sass sass/ -o build/css/",
    "dev": "rerun-script"
  }
}

Затем вы открываете командную строку в корневой папке и запускаете следующее:

npm install --save-dev node-sass

Вышеуказанное устанавливает node-sass

Затем вы запускаете:

npm install --save-dev rerun-script

Вышеупомянутое создает задачу наблюдения, поэтому вам не нужно повторно запускать node-sass каждый раз, когда вы вносите изменения.

И последний раз ты бежишь

npm run dev

Выполнено!

person Vasilis Tsirimokos    schedule 20.01.2016
comment
Я хотел бы сначала попробовать это без глотка / ворчания. Наконец, он также обходится без, см. Ссылку на руководство. Я просто не знаю, как правильно использую node-sass. - person QJan84; 20.01.2016
comment
Перед тем, как проголосовать против моего ответа, вы можете взглянуть на первую ссылку, которую я отправил. Ответ, который вы ищете, есть: stackoverflow.com/a/31448585/4265499 - person Vasilis Tsirimokos; 20.01.2016
comment
Извините, неверное нажатие ... Нет, ответа нет. Цель состоит в том, чтобы скомпилировать пробег как задачу. - person QJan84; 20.01.2016
comment
Как насчет использования командной строки напрямую и выполнения таких действий, как: $ node-sass src / scss / -o dist / css / - person Vasilis Tsirimokos; 20.01.2016
comment
Не хочу запускать командную строку при каждом изменении! Это должно произойти автоматически! - person QJan84; 20.01.2016
comment
Я обновил свой первоначальный ответ. Он отлично работает для меня. Сообщите мне, если у вас возникнут проблемы. - person Vasilis Tsirimokos; 20.01.2016
comment
@ user3852555 Удалось ли вам найти решение для компиляции scss в css на ходу после запуска npm без запуска командной строки при каждом изменении. Поделись, пожалуйста. - person JS dev; 04.11.2016

arrow_upward
4
arrow_downward

Документация.

Если вы хотите автоматически компилировать файлы, вам нужно поставить флаг -w

node-sass -w -r assets/src/scss/ -o assets/dist/css/

Мой package.json

{
  "name": "my-project",
  "version": "1.0.0",
  "scripts": {
    "build:js": "watchify assets/src/js/main_1.js -o 'exorcist assets/dist/js/main_1.js.map > assets/dist/js/main_1.js' -d -t [babelify --presets [latest]]",
    "build:scss": "node-sass -w -r assets/src/scss/ -o assets/dist/css/",
    "build": "npm run build:scss & npm run build:js"
  },
  "devDependencies": {
    "babel-cli": "^6.0.0",
    "babel-preset-latest": "^6.16.0",
    "babelify": "^7.3.0",
    "browserify": "^13.1.1",
    "exorcist": "^0.4.0",
    "node-sass": "^4.5.0",
    "watchify": "^3.7.0"
  },
  "browserify": {
    "transform": [
      "babelify"
    ]
  }
}

Актуальная версия package.json: https://gist.github.com/artamonovdev/5f24aaca50299ba4d1

person artamonovdev    schedule 28.02.2017
comment
Ваш ответ, безусловно, является наименее сложным методом настройки и запуска настраиваемого scss для проекта, для которого требуется переопределение BS4 и бренда. Все остальные мои исследования привели к появлению враждебных сложных конфигураций фронтенд-разработчиков. - person Roralee; 02.11.2017

arrow_upward
3
arrow_downward

Режим watch в node-sass не запускает первую компиляцию. Предполагается, что вы уже запустили node-sass.

Лично я использую что-то вроде этого:

{
  "scripts": {
    "sass": "node-sass -o /path/to/dist /path/to/src",
    "sass:watch": "npm run sass && npm run sass -- --watch --recursive"
  }
}

И вы можете использовать это так: npm run sass:watch

person la3roug    schedule 17.04.2018