angular - truy cập giá trị SASS ($màu từ variables.scss) trong Typescript (Angular2 ionic2)

Trong Ionic 2, tôi muốn truy cập các biến $colors từ tệp "[dự án của tôi]\src\theme\variables.scss".

Tệp này chứa:

$colors: (
  primary:    #387ef5,
  secondary:  #32db64,
  danger:     #f53d3d,
  light:      #f4f4f4,
  dark:       #222,
  favorite:   #69BB7B
);

Trong một thành phần, tôi vẽ một bảng vẽ. Nó trông như thế này:

import {Component, Input, ViewChild, ElementRef} from '@angular/core';

@Component({
    selector: 'my-graph',
})
@View({
    template: `<canvas #myGraph class='myGraph'
     [attr.width]='_size'
     [attr.height]='_size'></canvas>`,
})

export class MyGraphDiagram {
    private _size: number;

    // get the element with the #myGraph on it
    @ViewChild("myGraph") myGraph: ElementRef; 

    constructor(){
        this._size = 150;
    }

    ngAfterViewInit() { // wait for the view to init before using the element

      let context: CanvasRenderingContext2D = this.myGraph.nativeElement.getContext("2d");
      // HERE THE COLOR IS DEFINED AND I D LIKE TO ACCESS variable.scss TO DO THAT
      context.fillStyle = 'blue';
      context.fillRect(10, 10, 150, 150);
    }

}

Như có thể thấy, tại một điểm nào đó trong đoạn mã này màu của hình dạng được định nghĩa: context.fillStyle='blue', tôi muốn sử dụng thay vào đó một cái gì đó như context.fillStyle='[variables.scss OBJECT].$colors.primary'.

Có ai có ý tưởng không?

Câu trả lời #1

Thật không may, không có cách nào để truy cập trực tiếp biến SASS từ mã typescript/javascript. Tuy nhiên, chúng ta có thể tạo một giải pháp thay thế để truy cập những biến đó.

Hãy để tôi mô tả ngắn gọn các bước để truy cập các biến SASS từ trong mã nguồn TypeScript:

1. Tạo một thành phần trợ giúp SASS

Tạo ../providers/sass-helper/sass-helper.component.scss:

$prefix: "--"; //Prefix string for custom CSS properties

//Merges a variable name with $prefix
@function custom-property-name($name) {
    @return $prefix + $name;
}

// Defines a custom property
@mixin define-custom-property($name, $value) {
    #{custom-property-name($name)}: $value;
}

body {
    // Append pre-defined colors in $colors:
    @each $name, $value in $colors {
        @include define-custom-property($name, $value);
    }

    // Append SASS variables which are desired to be accesible:
    @include define-custom-property('background-color', $background-color);
}

Trong tệp SCSS này, chúng ta chỉ đơn giản tạo các thuộc tính tùy chỉnh bên trong phần body của DOM. Bạn nên thêm từng biến SASS mà bạn muốn có thể truy cập vào tệp SCSS này bằng cách sử dụng mixin có tên define-custom-property mà yêu cầu hai tham số: tên biến và giá trị biến.

Ví dụ, tôi đã thêm các mục cho tất cả màu sắc được định nghĩa trong $colors cũng như một mục cho biến SASS $background-color được định nghĩa trong tệp theme/variables.scss của tôi. Bạn có thể thêm bao nhiêu biến tùy thích.

Tạo ../providers/sass-helper/sass-helper.component.ts:

import { Component } from '@angular/core';

export const PREFIX = '--';

@Component({
    selector: 'sass-helper',
    template: '<div></div>'
})
export class SassHelperComponent {

    constructor() {

    }

    // Read the custom property of body section with given name:
    readProperty(name: string): string {
        let bodyStyles = window.getComputedStyle(document.body);
        return bodyStyles.getPropertyValue(PREFIX + name);
    }
}

2. Tích hợp thành phần trợ giúp SASS

Từ bây giờ, chúng ta có thể tuân theo các nguyên tắc chuẩn của Ionic2 để tích hợp và sử dụng các thành phần.

• Thêm tên lớp thành phần (SassHelperComponent) vào phần khai báo của NgModule trong app.module.ts

• Chèn mã HTML sau vào mẫu HTML của trang của bạn từ nơi bạn muốn truy cập những biến ma thuật đó:

  <sass-helper></sass-helper>

3. Sử dụng Thành phần Hỗ trợ

Trong tệp TS của trang của bạn, bạn nên chèn các dòng sau vào lớp trang của bạn:

@ViewChild(SassHelperComponent)
private sassHelper: SassHelperComponent;

Cuối cùng, bạn có thể đọc giá trị của bất kỳ biến SASS nào chỉ bằng cách gọi phương thức của lớp con như sau:

// Read $background-color:
this.sassHelper.readProperty('background-color');

// Read primary:
this.sassHelper.readProperty('primary');

Câu trả lời #2

Một khả năng là tạo một tệp .ts từ tệp .scss. Một ví dụ đơn giản về quy trình này:

1. Cài đặt npm i --save-dev @crocsx/scss-to-json. Lưu ý: Trước đây tôi đã có scss-to-json ở đây, nhưng vì nó không được duy trì nên tôi đã cập nhật lên phiên bản fork.

2. Đặt cái này vào package.json của bạn:

  "scripts": {
    ...
    "scss2json": "echo \"export const SCSS_VARS = \" > src/app/scss-variables.generated.ts && scss-to-json src/variables.scss >> src/app/scss-variables.generated.ts"
  },

và chạy nó với npm run scss2json. Người dùng Windows sẽ cần điều chỉnh ví dụ.

3. Truy cập các biến:

    import {SCSS_VARS} from './scss-variables.generated';
    ...
    console.log(SCSS_VARS['$color-primary-1']);

Một lợi thế của việc này là bạn sẽ nhận được hoàn thành kiểu từ các IDE và đây là một phương tiện khá đơn giản để đạt được mục tiêu của bạn nói chung.

Tất nhiên bạn có thể làm cho điều này tiên tiến hơn, ví dụ bằng cách làm cho tệp được tạo ra chỉ đọc và đặt script vào tệp .js riêng của nó và làm cho nó hoạt động trên mọi hệ điều hành.

Câu trả lời #3

Điều này có thể thực hiện được bằng cách sử dụng CSS Modules.

Các mô-đun CSS

Từ mô tả dự án:

Khi nhập Module CSS từ một Module JS, nó xuất ra một đối tượng với tất cả các ánh xạ từ tên cục bộ sang tên toàn cục.

Theo cách mà chúng ta có thể đọc các biến từ tệp css/scss như sau:

import styles from "./style.css";    

element.innerHTML = '<div class="' + styles.className + '">';

Hỗ trợ cho CSS Modules đã được thiết lập mặc định bởi Angular CLI, sử dụng Webpack được cấu hình với css-loader.

Các bước để làm cho nó hoạt động là:

1. Chỉ xuất các biến scss mà bạn muốn sử dụng.
2. Cấu hình một module TypeScript cho styles.scss.
3. Nhập các biến vào các thành phần typescript của bạn.

1 - Xuất các biến

Trong styles.scss của bạn, sử dụng từ khóa :export để xuất $colors. Có vẻ như :export không hỗ trợ xuất bản đồ, chỉ hỗ trợ chuỗi, vì vậy chúng ta phải tạo một mixin để chuyển một bản đồ thành chuỗi:

$colors: (
  primary: #387ef5,
  secondary: #32db64,
  danger: #f53d3d,
  light: #f4f4f4,
  dark: #222,
  favorite: #69bb7b,
);

@mixin rule($key, $value, $prefix) {
  #{$prefix}-#{$key}: $value;
}
@mixin map-to-string($map, $prefix) {
  @each $key, $value in $map {
    @include rule($key, $value, $prefix);
  }
}

:export {  
  @include map-to-string($colors, "colors");
}

:export được tạo ra sẽ là:

:export {
  "colors-danger": "#f53d3d";
  "colors-dark": "#222";
  "colors-favorite": "#69bb7b";
  "colors-light": "#f4f4f4";
  "colors-primary": "#387ef5";
  "colors-secondary": "#32db64";
}

2 - Cấu hình một module TypeScript cho styles.scss

Chúng ta phải tạo một tệp styles.scss.d.ts với nội dung sau để cho phép nhập styles.scss trong các tệp typescript của chúng ta:

export interface globalScss {}

export const styles: globalScss;

export default styles;

3 - Nhập các biến vào component TypeScript mục tiêu

Vì chúng ta đã sử dụng xuất khẩu mặc định, chúng ta có thể nhập nó vào component của mình như sau:

//...
import styles from 'src/styles.scss';

@Component({
  selector: 'app-colors-use',
  templateUrl: './colors-user.component.html',
  styleUrls: ['./colors-user.component.scss'],
})
export class ColorsUserComponent implements OnInit {

  buttonColor = styles["colors-primary"] //"#387ef5"

4 - (Thêm) Thêm định nghĩa kiểu vào styles.scss.d.ts

Bạn có thể thêm thông tin kiểu vào style.scss.d.ts:

export interface globalScss {  
  "colors-danger": string
  "colors-dark": string
  "colors-favorite": string
  "colors-light": string
  /**
   * Used for app-button, usually blue
   */
  "colors-primary": string
  /**
   * Used for borders, usually green
   */
  "colors-secondary": string
}

export const styles: globalScss;

export default styles;

Bằng cách đó, bạn có thể có một số lợi ích trong một trình soạn thảo như VS code:

CẬP NHẬT :

Cấu hình ở trên chỉ hoạt động đến ng 10. Cấu hình Css Modules đã thay đổi đáng kể từ ng 10 đến ng 11.