VueJS에서 JavaScript 코드와 SASS 변수를 공유하는 방법

서로 다른 인코딩 언어로 작업하는 단일 변수 성명은 개발자들이 어떤 기술이나 구조를 사용하든지 간에 모든 노력이 실현하는 목표이다.그것은 편리성 (값을 한 번 업데이트해서 어느 곳에서든 작업을 할 수 있도록 함) 과 일치성과 낮은 운행 시 오류율을 결합시킨다.
이 글은 VueJS에서 Sass와 JavaScript 사이의 변수를 공유하는 방법을 설명한다.프런트엔드 로직과 공유해야 하는 레이아웃 구속이 있을 때마다 유용합니다.반면 업무 논리가 양식 업데이트를 결정하고 주로 DOM 요소와 CSS Custom Properties의 내연 양식을 통해 해결한다.CSS 사용자 정의 속성은 잘 지원되지만, SASS 기반 솔루션을 찾고 있다면 계속 읽어 주십시오.

1단계: SASS/SCSS에서 변수 내보내기
CSS 모듈에서 대여한 기능을 사용하여 SASS 변수를 내보내고 JavaScript 코드로 가져올 수 있습니다.Google은 문법 :export 을 웹 패키지 로더 CSS Loader과 결합시키고, 후자는 내보낸 값을 자바스크립트 가져오기에 제공합니다.:export은 Selector로 구현되므로 SASS에 전혀 영향을 미치지 않습니다.

$your-sass-var: #663399;

:export {
  variablename: $your-sass-var;
}

이것은 SCSS 변수를 선언하고 variablename 식별자 아래로 내보냅니다.

2단계: JavaScript에서 SASS/SCSS 변수 가져오기
내보낸 SASS 변수를 가져오는 가장 간단한 방법은 SASS 파일 자체를 가져오는 것입니다.

import exportedVars from './path/to/file.scss' 

그러나 Vue에서는 스타일을 별도의 SCS 또는 SASS 파일로 작성하는 경우가 거의 없습니다.대부분의 경우 단일 파일 구성 요소를 작성합니다. 이것은 사용자 정의 VueJS 파일 형식으로 HTML과 비슷한 문법으로 Vue 구성 요소를 설명합니다. 보통 template, script, style 블록을 포함합니다.
SFC에서만 스타일 코드 블록을 가져오는 방법은 무엇입니까?나는 한동안 걸려서야 답을 찾았지만, 힌트는 '웹 패키지와 같다.' 였다.너는 Vue Loader에게 너를 위해 이 일을 해 달라고 요구한다.
Vue Loader는 단일 파일을 세 개 이상의 내보내기로 변환합니다.이렇게 하는 과정에서 특정 블록을 찾을 수 있는 문법으로 원본 파일 이름을 다시 쓸 수 있습니다.이렇게:

import exportedVars from './path/to/file.vue?vue&type=style&index=0&lang=scss&module=1' 

./path/to/file.vue은 일반적으로 대상 파일에 대한 참조입니다.동일한 SFC 내의 스타일 블록에서 가져오려면 ./yourcomponentname.vue을 사용합니다.다음은 ?vue 검색 문자열 부분입니다.이렇게 하면 Vue Loader가 SFC를 여러 부분으로 분해하고 유형과 색인에 따라 코드 블록을 제공해야 한다는 것을 이해할 수 있습니다.&type=style, &index=0 및 &lang=scss을 사용하면 Vue Loader에서 올바른 블록을 가져와 올바른 프로세서에 전달할 수 있습니다.index 매개 변수는 SFC의 여러 style 블록에 주소를 지정할 수 있습니다.
마지막으로 vue loader의 최신 버전에서는 CSS 모듈의 내보내기만 엄격히 수행합니다.&module=1을 추가하면 스타일을 가져올 때 기본 내보내기를 제공합니다.

3단계: 가져온 변수 사용
Sass 변수는 identifier.variablename과 같은 가져오기 식별자의 속성으로 액세스할 수 있습니다.
다음은 전체적이고 간단한 전체 예입니다.

<template>
  <div>
    <p>Andy Kaufman {{ lyrics }}</p>
  </div>
</template>
<script>
import styles from './ManOnTheMoon.vue?vue&type=style&index=0&lang=scss&module=1'

export default {
  name: 'ManOnTheMoon',
  data() {
    return {
      lyrics: styles.lyrics,
    }
  },
}
</script>
<style lang="scss">
$lyrics: ' in the wrestling match';

:export {
  lyrics: unquote($lyrics);
}
</style>

앤디 코프만은 씨름 경기에서 ¹이라는 짧은 말을 보여 준다.
참고: 모든 변수는 문자열로 내보냅니다.값을 숫자 또는 부울 값으로 강제하려면 유형 변환 및 변환을 사용합니다.

마무리
본고는 주로 VueJS를 논의하지만 이러한 방법은 css 로드 프로그램이 있는 웹 패키지의 프레임워크나 파이프라인을 구축하는 데 적용된다.
CSS 사용자 정의 속성(또는 CSS 변수)은 더욱 매끄러운 실현을 제공합니다. 당신은 각각 element.style.getPropertyValue()과 element.style.setProperty()을 통해 사용자 정의 속성을 읽고 업데이트할 수 있습니다. 저는 CSS 사용자 정의 속성을 전환하고 사용해서SASS 변수(심지어SAS내에서!)를 대체하는 것을 권장합니다.그러나, 만약에SASS 변수를 기반으로 완전히 개발된 프로젝트가 있다면, CSS 사용자 정의 속성을 재구성할 필요가 없다면, 이 해결 방안은 매우 유용할 것입니다.

만약 당신이 예의 참고를 잡았다면 나는 당신이 지금 머릿속에서'예, 예, 예, 예'를 부르고 있을 것이라고 의심합니다.modo에서 가능하다면 R.E.M. 추천인을 포기할 기회를 놓칠 수 없습니다.😬

표지 사진 Lucas Benjamin - Unsplash