Конвертируем файл .SCSS в файл .CSS (в командной строке выполним: "npm run EvgenConvertCSS" . EvgenConvertCSS это скрипт конвертирует файл 1.scss в файл 1.css. Скрипт EvgenConvertCSS находится в файле package.json) | npm, node.js
last updated: 5 June 2020
Я буду использовать
Node.js
So if you have not installed
Node.js , then
install Node.js ...
План (6 шагов)
Шаг 1. Создаем пустую папку "my_example_scss" на диске D:/
D:/my_example_scss
Шаг 2. В командной строке выполним: npm init . Эта команда создает пустой файл package.json и заполняет этот файл данными по умолчанию
Внутри нашей папки "my_example_scss" в командной строке выполним
Command Prompt (Win Console)
npm init
Все время нажимаем кнопку Enter
Вот это увидим на экране:
В результате создастся файл package.json
Файл package.json
{
"name" : "my_example_scss" ,
"version" : "1.0.0" ,
"description" : "",
"main" : "index.js" ,
"scripts" : {
"test" : "echo " Error: no test specified" && exit 1"
},
"author" : "",
"license" : "ISC"
}
Шаг 3. В файл package.json сами добавим скрипт "EvgenConvertCSS": "node-sass --include-path scss 1.scss 1.css" . Скрипт EvgenConvertCSS конвертирует файл 1.scss в файл 1.css
Это значит что файл D:/my_example_scss/1.scss
будет сконвертирован в файл
D:/my_example_scss/1.css
json
{
"name" : "my_example_scss" ,
"version" : "1.0.0" ,
"description" : "",
"main" : "index.js" ,
"scripts" : {
"EvgenConvertCSS" : "node-sass --include-path scss 1.scss 1.css"
},
"author" : "",
"license" : "ISC"
}
На заметку! Делаем конвертацию папок.
Если вы хотите чтобы все .scss файлы в папке src/files_scss/
сконвертировались в папку dest/files_css/ то нужно в
файле package.json написать так:
"EvgenConvertCSS": "node-sass src/files_scss/ --output dest/files_css/ "
Файл package.json
{
"name": "my_example_scss",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"EvgenConvertCSS": "node-sass src/files_scss/ --output dest/files_css/ "
},
"author": "",
"license": "ISC"
}
Шаг 4. В командной строке выполним: npm install node-sass . Это команда добавляет пакет node-sass в папку node_modules
npm install это значит мы добавим пакет в node.js ...
Внутри нашей папки
"my_example_scss" в командной строке выполним
Command Prompt (Win Console)
npm install node-sass
Вот это увидим на экране:
В результате создастся файл:
package-lock.json
и создастся папка:
node_modules
Шаг 5. Создадим файл 1.scss в папке my_example_scss
Файл 1.scss
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
font: 100% $font-stack;
color: $primary-color;
}
Шаг 6. В командной строке выполним: npm run EvgenConvertCSS . Это команда запустит скрипт EvgenConvertCSS это конвертация файла 1.scss в файл 1.css
Внутри нашей папки "my_example_scss" в командной строке выполним
Command Prompt (Win Console)
npm run EvgenConvertCSS
На экране увидим
В результате создастся файл: 1.css
Файл 1.css
body {
font: 100% Helvetica, sans-serif;
color: #333;
}
Download the example
Чтобы запустить пример выполните
Command Prompt (Win Console)
npm run EvgenConvertCSS
Ошибка "Node Sass could not find a binding for your current environment"
Чтобы исправить ошибку выполните
Command Prompt (Win Console)
npm rebuild node-sass
Чтобы запустить пример выполните
Command Prompt (Win Console)
npm run EvgenConvertCSS