ใช้ Sass ใน Angular

โดยปกติโปรเจคที่สร้างขึ้นด้วย angular cli มันจะใช้ css เป็น default format สำหรับการกำหนด stylesheet ของโปรเจค ซึ่งถ้าเราอยากจะใช้เป็นอย่างอื่น เราก็สามารถกำหนดได้ตั้งแต่ตอนสั่ง `ng new` ว่าจะเอาตัวไหน จนกระทั่ง angular 7 ออกมา ตัว cli จะถามว่าเราอยากได้ format ไหนสำหรับทำ stylesheet และเราก็สามารถเลือกได้เลยว่าจะใช้ตัวไหนระหว่าง CSS, SASS, SCSS, LESS, Stylus

เลือก stylesheet format ตั้งแต่ตอนสร้าง project

อย่างที่บอกไว้ข้างต้น ว่าจริง ๆ เราสามารถกำหนด format ที่จะใช้ตั้งแต่ตอนสั่ง ng new เลยว่าจะใช้ตัวไหน โดยการใส่ option — style=<format> ลงไป โดย format จะหมายถึงนามสกุลของ stylesheet format ที่ต้องการ (css, sass, scss, less, styl) เราก็ใช้เป็น sass

angular 7

ใน angular 7 ตอนสั่ง ng new ถ้าเราไม่ได้ระบุ stylesheet format ตั้งแต่ต้นด้วย option — style มันจะ prompt ถามว่าเราจะเลือก format ไหน เราก็แค่เลือก format ที่เป็น SASS เท่านั้นเลย ง่าย ๆ

แก้ project เดิมให้ใช้ sass

ทีนี้ถ้าเรามีโปรเจคเดิมที่เป็น css อยู่แล้ว แล้วอยากเปลี่ยนมาใช้ sass จะทำไงดี

สำหรับ angular ก่อน 6

ก่อนอื่นเราต้องบอก angular ว่าต่อไปนี้นะ เราจะใช้ทุกอย่างเป็น sass แล้ว ด้วยคำสั่ง ng set defaults.styleExt sass คำสั่งนี้จะไปเพิ่มสิ่งนี้ลงไปด้านล่างสุดของไฟล์ .angular-cli.json

“defaults”: {
  “styleExt”: “sass”,
  “component”: {
  }
}

สำหรับ angular 6 ขึ้นไป

เราเข้าไปแก้ไฟล์ angular.json โดยการเพิ่มสิ่งนี้ลงไปใน schematics ใต้โปรเจคของเราได้เลย

“schematics”: {
  “@schematics/angular:component”: {
    “styleext”: “sass”
  }
},

หลังจาก angular รู้แล้วว่าจะต้องใช้ sass ที่เหลือก็ไปตามแก้ css ไฟล์ ให้เป็น sass ไฟล์ด้วยวิธี manual ทีละไฟล์

component ของเดิม

ไฟล์ app.component.css

h1 {
  color: #ff0000;
}

ไฟล์ app.component.html

import { Component } from ‘@angular/core’;
@Component({
  selector: ‘app-root’,
  templateUrl: ‘./app.component.html’,
  styleUrls: [‘./app.component.css’]
})
export class AppComponent {
  title = ‘ng-sass’;
}

component ของที่แก้แล้ว

ไฟล์ app.component.sass

$title-color: #ff0000
h1
  color: $title-color

ไฟล์ app.component.html

import { Component } from ‘@angular/core’;
@Component({
  selector: ‘app-root’,
  templateUrl: ‘./app.component.html’,
  styleUrls: [‘./app.component.sass’]
})
export class AppComponent {
  title = ‘ng-sass’;
}

global configuration ของเดิม

angular.json

“styles”: [
  “src/styles.css”
],

styles.css

body {
  background-color: #00ffff;
}

global configuration ของที่แก้แล้ว

angular.json

“styles”: [
  “src/styles.sass”
],

styles.sass

$background-color: #00ffff
body
  background-color: $background-color

แล้วไงต่อ

พอเราเปลี่ยนมาใช้ sass แล้ว เราก็สามารถใช้ feature ต่าง ๆ ของ sass ได้ทั้งหมด ไม่ว่าจะเป็น sass import, mixins หรืออื่น ๆ ตามที่ sass มีให้

สะดวกขึ้นเยอะ

อ้างอิง

• https://scotch.io/tutorials/using-sass-with-the-angular-cli
• https://medium.com/codingthesmartway-com-blog/creating-angular-projects-with-angular-cli-e32b2cb486da
• https://sass-lang.com

Pingback : https://chonla.com/2018/10/26/using-sass-in-angular/