จะคอมไพล์หรือแปลง sass / scss เป็น css ด้วย node-sass ได้อย่างไร (ไม่มี Ruby)

ฉันกำลังดิ้นรนกับการตั้งค่า libsass เนื่องจากมันไม่ตรงไปตรงมาเหมือนกับ Transpiler ที่ใช้ Ruby ใครช่วยอธิบายวิธีการ:

1. ติดตั้ง libsass?
2. ใช้จากบรรทัดคำสั่ง?
3. ใช้กับงานวิ่งอย่างอึกและฮึดฮัด?

ฉันมีประสบการณ์เพียงเล็กน้อยกับผู้จัดการแพ็คเกจและแม้แต่น้อยกว่ากับนักวิ่งงาน

ฉันเลือกตัวดำเนินการ node-sass สำหรับ libsass เพราะมันขึ้นอยู่กับ node.js

การติดตั้ง node-sass

• (ข้อกำหนดเบื้องต้น) หากคุณไม่มี npm ให้ติดตั้งNode.jsก่อน
• $ npm install -g node-sass-gโหนดเขื่องติดตั้งทั่วโลก

หวังว่าจะติดตั้งสิ่งที่คุณต้องการหากไม่ได้อ่าน libsass ที่ด้านล่าง

วิธีใช้ node-sass จาก Command line และ npm scripts

รูปแบบทั่วไป:

$ node-sass [options] <input.scss> [output.css]
$ cat <input.scss> | node-sass > output.css

ตัวอย่าง:

1. $ node-sass my-styles.scss my-styles.css รวบรวมไฟล์เดียวด้วยตนเอง
2. $ node-sass my-sass-folder/ -o my-css-folder/ รวบรวมไฟล์ทั้งหมดในโฟลเดอร์ด้วยตนเอง
3. $ node-sass -w sass/ -o css/รวบรวมไฟล์ทั้งหมดในโฟลเดอร์โดยอัตโนมัติเมื่อใดก็ตามที่มีการแก้ไขไฟล์ต้นฉบับ -wเพิ่มนาฬิกาสำหรับการเปลี่ยนแปลงในไฟล์

ตัวเลือกที่มีประโยชน์มากขึ้นเช่น 'อัด' @ ที่นี่ บรรทัดคำสั่งเหมาะสำหรับการแก้ปัญหาอย่างรวดเร็วอย่างไรก็ตามคุณสามารถใช้ Task Runner เช่น Grunt.js หรือ Gulp.js เพื่อทำให้กระบวนการสร้างเป็นไปโดยอัตโนมัติ

คุณยังสามารถเพิ่มตัวอย่างข้างต้นในสคริปต์ npm ในการใช้สคริปต์ npm เป็นไฟล์ทางเลือกที่จะอึกอ่านบทความนี้ครอบคลุม @ css-tricks.comโดยเฉพาะอย่างยิ่งอ่านเกี่ยวกับงานการจัดกลุ่ม

• หากไม่มีpackage.jsonไฟล์ในไดเร็กทอรีโปรเจ็กต์ของคุณทำงานอยู่$ npm initจะสร้างขึ้นมา ใช้-yเพื่อข้ามคำถาม
• เพิ่ม"sass": "node-sass -w sass/ -o css/"ไปที่scriptsในpackage.jsonไฟล์ ควรมีลักษณะดังนี้:

"scripts": {
    "test" : "bla bla bla",
    "sass": "node-sass -w sass/ -o css/"
 }

• $ npm run sass จะรวบรวมไฟล์ของคุณ

วิธีใช้อึก

• $ npm install -g gulp ติดตั้ง Gulp ทั่วโลก
• ถ้าไม่มี package.jsonไฟล์ในไดเร็กทอรีโปรเจ็กต์ของคุณทำงานอยู่$ npm initจะสร้างขึ้นมา ใช้-yเพื่อข้ามคำถาม
• $ npm install --save-dev gulpติดตั้ง Gulp ในเครื่อง --save-devเพิ่มgulpให้devDependenciespackage.jsonใน
• $ npm install gulp-sass --save-dev ติดตั้ง gulp-sass ในเครื่อง
• ตั้งค่าอึกสำหรับโปรเจ็กต์ของคุณโดยสร้างgulpfile.jsไฟล์ในโฟลเดอร์รูทโปรเจ็กต์ของคุณด้วยเนื้อหานี้:

'use strict';
var gulp = require('gulp');

ตัวอย่างพื้นฐานในการถ่ายทอด

เพิ่มรหัสนี้ใน gulpfile.js ของคุณ:

var gulp = require('gulp');
var sass = require('gulp-sass');
gulp.task('sass', function () {
  gulp.src('./sass/**/*.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest('./css'));
});

$ gulp sassรันงานด้านบนซึ่งรวบรวมไฟล์. scss ในsassโฟลเดอร์และสร้างไฟล์. css ในcssโฟลเดอร์

เพื่อให้ชีวิตง่ายขึ้นเรามาเพิ่มนาฬิกาเพื่อที่เราจะได้ไม่ต้องรวบรวมนาฬิกาด้วยตนเอง เพิ่มรหัสนี้ในgulpfile.js:

gulp.task('sass:watch', function () {
  gulp.watch('./sass/**/*.scss', ['sass']);
});

ตั้งค่าทั้งหมดแล้ว! เพียงเรียกใช้งานนาฬิกา:

$ gulp sass:watch

วิธีใช้กับ Node.js

ตามความหมายของชื่อ node-sass คุณสามารถเขียนสคริปต์ node.js ของคุณเองสำหรับการโอนย้าย หากคุณอยากรู้ลองดูหน้าโปรเจ็กต์ node-sass

แล้ว libsass ล่ะ?

Libsass เป็นไลบรารีที่ต้องสร้างโดยผู้ใช้งานเช่น sassC หรือในกรณีของเรา node-sass Node-sass มี libsass เวอร์ชันที่สร้างขึ้นซึ่งใช้โดยค่าเริ่มต้น หากไฟล์บิลด์ไม่ทำงานบนเครื่องของคุณไฟล์จะพยายามสร้าง libsass สำหรับเครื่องของคุณ กระบวนการนี้ต้องใช้ Python 2.7.x (3.x ใช้ไม่ได้ ณ วันนี้) นอกจากนี้:

LibSass ต้องการ GCC 4.6+ หรือ Clang / LLVM หากระบบปฏิบัติการของคุณเก่ากว่าเวอร์ชันนี้อาจไม่สามารถคอมไพล์ได้ ใน Windows คุณต้องมี MinGW ที่มี GCC 4.6+ หรือ VS 2013 Update 4+ นอกจากนี้ยังสามารถสร้าง LibSass ด้วย Clang / LLVM บน Windows

การติดตั้งเครื่องมือเหล่านี้อาจแตกต่างกันไปตาม OS ที่แตกต่างกัน

ภายใต้ Windows ปัจจุบัน node-sass รองรับ VS2015 โดยค่าเริ่มต้นหากคุณมี VS2013 ในกล่องของคุณเท่านั้นและพบข้อผิดพลาดขณะรันคำสั่งคุณสามารถกำหนดเวอร์ชันของ VS ได้โดยเพิ่ม: --msvs_version = 2013 นี้เป็นข้อสังเกตในหน้า NPM โหนดเขื่อง

ดังนั้นบรรทัดคำสั่งปลอดภัยที่ทำงานบน Windows ด้วย VS2013 คือ: npm install --msvs_version = 2013 gulp node-sass gulp-sass

ใน Windows 10 โดยใช้โหนด v6.11.2และnpm v3.10.10เพื่อดำเนินการโดยตรงในโฟลเดอร์ใด ๆ :

> node-sass [options] <input.scss> [output.css]

ฉันทำตามคำแนะนำในnode-sass Github เท่านั้น :

1. เพิ่มข้อกำหนดเบื้องต้นของ node-gypโดยเรียกใช้ในฐานะผู้ดูแลระบบใน Powershell (ใช้เวลาสักครู่):

   > npm install --global --production windows-build-tools
   

2. ในเชลล์บรรทัดคำสั่งปกติ ( Win+ R+ cmd + Enter) ให้รัน:

   > npm install -g node-gyp
   > npm install -g node-sass
   

   ตำแหน่งแพคเกจเหล่านี้ภายใต้-g %userprofile%\AppData\Roaming\npm\node_modulesคุณสามารถตรวจสอบว่าnpm\node_modules\node-sass\bin\node-sassมีอยู่แล้ว

3. ตรวจสอบว่าตัวแปรสภาพแวดล้อมบัญชีท้องถิ่น ของคุณ(ไม่ใช่ระบบ)PATHประกอบด้วย:

   %userprofile%\AppData\Roaming\npm
   

   หากไม่มีพา ธ นี้npmและnodeอาจยังคงรันอยู่ แต่ไฟล์bin ของโมดูลจะไม่ทำงาน!

ปิดเปลือกก่อนหน้านี้และเปิดใหม่และเรียกใช้อย่างใดอย่างหนึ่งหรือ> node-gyp> node-sass

บันทึก:

• windows-build-tools อาจไม่จำเป็น (ถ้าไม่มีการรวบรวมจะทำอย่างไรฉันต้องการอ่านถ้ามีคนทำให้มันไม่ต้องติดตั้งเครื่องมือเหล่านี้) แต่มันก็เพิ่มให้ผู้ดูแลระบบบัญชีGYP_MSVS_VERSIONตัวแปรสภาพแวดล้อมที่มี2015เป็นค่า
• ฉันยังสามารถเรียกใช้โมดูลอื่น ๆ โดยตรงด้วยไฟล์binเช่น> uglifyjs main.js main.min.jsและ> mocha