Phoenix1.6에서 SCSS 사용

며칠 전에 포닉스 앱을 포닉스 1.6로 업데이트했을 때 어떻게 설정해야 할지 몰라서 적어 놓았어요.그나저나 왜 SCSS가 필요합니까? SCSS는 Bootstrap로 맞춤형이기 때문입니다.또 테일윈드는 사용하지 않는다는 방침이다.
SCSS
결론

에 필요한 지식을 모두 English version에 썼다.

가장 간단한 방법은 Phoenix1.6 Asset Management 문서JS, phoenixframework/esbuildSCSS의 분업 체제이다.

CargoSense/dart_sass를 사용하고 싶을 때는 SCSS와phoenixframework/esbuild 두 가지를 사용할 수 있다.그러나 문서에 기재된 코드를 흑운에 복제하지 말고 자산을 어떤 순서로 처리해야 할지 미리 잘 고려한 뒤 설정하는 것이 중요하다.

CargoSense/dart_sass

새로 만든 Phoenix1.6 응용 프로그램에서 아무것도 하지 않아도 설정되었습니다.

JS를 구축하고 취합합니다.(산물: priv/static/assets/assets/app.js

CSS가 import이면 CSS를 구축하고 요약합니다.(산물: priv/static/assets/assets/app.css

esbuild의 실행 프로그램phoenixframework/esbuild을 정확하게 설정하면 자동으로 설치됩니다.

phoenixframework/esbuild를 사용하려면 다음 중 하나가 필요합니다.

SCSS

esbuild plugens(이것은 CargoSense/dart_sass에서는 안 될 것 같다)

개발 시 사용phoenixframework/esbuild을 통해 자산이 변할 때마다 자동으로 구축할 수 있다.

정식 공연은 매번 디버깅mix assets.deploy으로 지령으로 컴파일된다.

때로는 낡은 산물이 나쁜 짓을 할 때가 있다.행동이 정상적이지 않으면 확인priv/static/assets/하고 필요하지 않은 파일을 삭제하십시오.

esbuild 설정
세 개의 파일에 설정된 것 같습니다.

mix.exs

elixir 관련

config/config.exs

esbuild 관련

실행 매개변수 지정

사용할 esbuild의 실행 프로그램 버전

구축할 파일

빌드 제품의 카탈로그 배치

등

config/dev.exs

Phoenix.Endpoint watcher 관련(개발용)

Phoenix.Endpoint watcher의 기본적인 사용 방법은 생각보다 간단하다.하지만 초기 설정이라면 phoenixframework/esbuild 사용할 수 없다.
어떻게든 쓰고 싶을 때SCSSSCSS는 편리합니다.
CargoSense/dart_sass

CargoSense/dart_sass와 같은 요령으로 설정할 수 있다SCSS.

phoenixframework/esbuild 마찬가지로 세 파일에 설정합니다.

mix.exs

config/config.exs

config/dev.exs

주의점
처음에는 아무 생각 없이 phoenixframework/esbuild된 문서에 적힌 코드를 사용했지만 이렇게 되면 잘못된 것일 수도 있다는 것을 알게 되었다.문서가 나쁜 것이 아니라 자산을 어떻게 처리하고 싶은지 명확한 방침이 필요하다.
예를 들어 CargoSense/dart_sass와 phoenixframework/esbuild 두 CSS가 제품을 구축하는 목적지priv/static/assets/app.css가 있다면 CSS가 JS 파일에 기록된 상황에서 같은 파일을 경쟁적으로 덮어쓴다.이 점을 알아차리기 전에 시간이 걸릴 것이다.
처음에 여러 가지 방법을 시도한 결과CargoSense/dart_sassJS,phoenixframework/esbuildSCSS의 분업체제가 가장 좋은 결론에 이르렀다.가장 간단하고 확실하다.
예를 들어 다음과 같은 방침을 고려할 수 있다.

CargoSense/dart_sass에서 CSS는 전혀 취급되지 않습니다.

phoenixframework/esbuild의 성과 파일을 app.css 이외의 이름으로 설정하면 만약CargoSense/dart_sass에 CSS가 생성되어도 충돌이 발생하지 않기 때문에 고장이 발생하기 쉽다.

그런 다음 HTML 템플릿으로 파일을 참조합니다.
lib/my_app_web/templates/layout/root.html.heex

-  <link phx-track-static rel="stylesheet" href={Routes.static_path(@conn, "/assets/app.css")}/>
+  <link phx-track-static rel="stylesheet" href={Routes.static_path(@conn, "/assets/from_scss.css")}/>
   <script defer phx-track-static type="text/javascript" src={Routes.static_path(@conn, "/assets/app.js")}></script>

예를 들어 config/config.exs 이런 느낌입니다.
config/config.exs

...

# Configure esbuild (the version is required)
config :esbuild,
  version: "0.14.1",
  default: [
    args: [
      "js/app.js",
      "--bundle",
      "--target=es2016",
      "--outdir=../priv/static/assets",
      "--external:/fonts/*",
      "--external:/images/*"
    ],
    cd: Path.expand("../assets", __DIR__),
    env: %{"NODE_PATH" => Path.expand("../deps", __DIR__)}
  ]

# https://github.com/CargoSense/dart_sass
config :dart_sass,
  version: "1.44.0",
  default: [
    args: [
      "scss/index.scss",
      "../priv/static/assets/from_scss.css" # デバグしやすいよう`app.css`以外の名前にする
    ],
    cd: Path.expand("../assets", __DIR__)
  ]

...

phoenixframework/esbuild
오래된 Phoenix 1.6시phoenixdiff.org를 업데이트하고 싶을 때 편리합니다.차점을 확인할 수 있다.