dir.by  
  Search  
Programming, development, testing
SCSS файл (с помощью компилятора SASS получаем CSS файл)
Конвертируем файл .SCSS в файл .CSS (в командной строке выполним: "npm run EvgenConvertCSS" . EvgenConvertCSS это скрипт конвертирует файл 1.scss в файл 1.css. Скрипт EvgenConvertCSS находится в файле package.json) | npm, node.js
  Looked at 3180 times       Comments 1  
 Last Comment: (15 November 2022 19:28) Ну нафик такой геморрой? read...       Write a comment...
 Конвертируем файл .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
 
← Previous topic
Конвертируем файл .SCSS в файл .CSS (в командной строке выполним: "sass 1.scss:1.css") | node.js
 
 
Your feedback ... 1 Comments
guest
15 November 2022 19:28
Ну нафик такой геморрой?
   
Your Name
Your comment (www links can only be added by a logged-in user)

  Объявления  
  Объявления  
 
Что такое SCSS файл ?
Вариант 1. Конвертируем файл .SCSS в файл .CSS (вариант очень простой)
Конвертируем файл .SCSS в файл .CSS (в командной строке выполним: "sass 1.scss:1.css") | node.js
Вариант 2. Конвертируем файл .SCSS в файл .CSS (используем файл package.json)
Конвертируем файл .SCSS в файл .CSS (в командной строке выполним: "npm run EvgenConvertCSS" . EvgenConvertCSS это скрипт конвертирует файл 1.scss в файл 1.css. Скрипт EvgenConvertCSS находится в файле package.json) | npm, node.js

  Ваши вопросы присылайте по почте: info@dir.by  
Яндекс.Метрика