SvelteKit의 글로벌 scss

TL;DR

실행: npm i -D nodemon concurrently
다음 npm 스크립트를 추가합니다.

"dev:full": "concurrently --kill-others \"npm run scss:dev\" \"npm run dev:nodemon\"",
"dev:nodemon": "nodemon --exec \"npm run dev\"",
"scss": "sass src/scss/:static/style/",
"scss:dev": "sass -w src/scss/:static/style/"

npm run scss && , build , package 앞에 preview를 추가하고prepare 스크립트

"build": "npm run scss && svelte-kit build",
"package": "npm run scss && svelte-kit package",
"preview": "npm run scss && svelte-kit preview",
"prepare": "npm run scss && svelte-kit sync",

설정

그래서 작은 프로젝트를 시작했고(조만간 그것에 대해 쓸 예정입니다)
나는 호리호리한 프런트 엔드를 쓸 것입니다.

그러다가 SvelteKit이 존재한다는 사실을 기억하고 그것을 배우려고 했습니다.
그래서 새로운 프로젝트를 시작했습니다.

새 프로젝트 설정에서 둘 다에 대해 물었을 때 기분 좋게 놀랐습니다.
Typescript와 Sass(scss) 둘 다 좋아하지만
풀바디 스타일 조금 아쉬웠어요

본문에 포함할 scss 파일을 직접 컴파일하는 기능을 지원하지 않습니다.app.html 파일

글쎄, 우리가 가진 옵션을 보자

가장 먼저 튀어나오는 것은 아마도 최선의 선택일 것입니다.

SvelteKit의 스타일 전처리기에는 특수:global 선택기가 있으므로
메인에 다음 블록이 있을 수 있습니다__layout.svelte.

<style lang="scss">
  :global {
    @import '<path to global scss>';
  }
</style>

잘 작동하지만 다른 구성 요소에서 많은 경고를 생성합니다.
전역 파일의 일부 선택기와 일치하는 요소가 없는 경로입니다.

성가신.

다른 것을 시도해 보자

sass -w <path to global>:<path to static>를 실행하여 Sass가
스타일시트, 추가<link rel="stylesheet" href="%sveltekit.assets%/global.css">당신에게 app.html
잘 작동합니다...

시작할 때svelte-kit dev
나중에 파일을 수정하면 페이지를 새로고침해도 변경되지 않습니다.
정적입니다. 왜 그래야 합니까?

nodemon 입력

nodemon는 멋진 작은 노드 패키지/응용 프로그램으로 파일을 감시합니다.
무언가가 변경되면 중지하고 프로세스를 다시 시작합니다.

좋습니다. svelte-kit 및 watch에 대해 npm cript를 실행하도록 말할 수 있습니다.
당신의 글로벌 파일

따라서 npm i -D nodemon로 nodemon을 설치하고 npm 스크립트를 유지하겠습니다.
간단히 nodemon.json 파일을 추가해 보겠습니다.

{
  "delay": 0.25,
  "watch": [
    "<path to static file>"
  ]
}

이렇게 하면 nodemon에게 파일에서 변경 사항을 확인하고 250ms 동안 대기하도록 지시합니다.
재시작

새 npm 스크립트를 추가해 보겠습니다.

"dev:nodemon": "nodemon --exec \"npm run dev\""

전 세계적 스타일이 거의 변하지 않기를 바라며 원본을 그대로 두는 것을 좋아합니다.

누락된 유일한 것은 두 Sass를 시작하는 단일 명령입니다.
편집. 고맙게도 누군가가 만든 concurrently

동시 추가

concurrently는 병렬 실행을 위해 만들어진 노드 패키지입니다...
동시에

크로스 플랫폼이므로 거의 모든 개발 환경에서 실행됩니다.
모든 것이 죽도록 하는 --kill-others 옵션이 있습니다.
함께
npm i -D concurrently를 실행하여 설치할 수 있습니다.

거의 다 왔습니다. 마지막으로 해야 할 일은 npm 스크립트를 몇 개 더 추가하는 것입니다.

"dev:full": "concurrently --kill-others \"npm run scss:dev\" \"npm run dev:nodemon\"",
"scss": "sass <path to global>:<path to static>",
"scss:dev": "sass -w <path to global>:<path to static>"

이제 실행 중npm run dev:full은 감시 모드에서 Sass 컴파일러를 시작합니다.

또 하나의 예방 조치

패키징할 때 항상 전역 css가 컴파일되도록 하기 위해,
몇 가지 기본 SvelteKit npm 스크립트를 수정합니다.
npm run scss && , build , package 앞에 preview를 추가하고prepare 스크립트

"build": "npm run scss && svelte-kit build",
"package": "npm run scss && svelte-kit package",
"preview": "npm run scss && svelte-kit preview",
"prepare": "npm run scss && svelte-kit sync"

이제 npm run dev:full를 실행하여 전역 CSS를 가져올 수 있습니다.
다시 컴파일 중입니다. 핫 리로드는 없지만 새로 고침을 누르는 것은 그리 어렵지 않습니다.

PS.: 생성된 css를 .gitignore에 추가해야 하나요?

개인적으로 저는 그렇게 하지 않을 것입니다. 애초에 그렇게 크지도 않고
적어도 내 설정에서는 많이 변경되지 않을 것입니다.
몇 가지 CSS 변수

반면에, 당신은 그것을 보는 것보다 그것을 놓치고 있다는 것을 알아차릴 가능성이 더 큽니다.
일부 변경 사항이 전파되지 않았습니다.

이것은 당신에게 달렸습니다