Angular CLI 프로젝트에서 Tailwind CSS 구축

Angular CLI 프로젝트에서 Tailwind CSS를 어떻게 사용하고 생산 구축 기간에 최적화된 CSS 패키지를 자동으로 만드는지 알고 싶다면, 잘 왔습니다.
너는 이 repo에서 효과적인 최소 해결 방안을 찾을 수 있다

각도 CLI
내가 보기에 비행기에서 발사되는 것은 그야말로 악몽이다.코드를 신속하게 생성하고 구축하며 설정하는 장점이 너무 많다.많은 도구(예를 들어 NX는 모두 그것의 기초 위에서 구축된 것이다.Angular 버전 6 때문에 CLI 에서 제거할 수도 없습니다.대신, 우리가 필요로 하지 않도록 확장할 수 있는 구축기 시스템이 있습니다.
Angular CLI는 엔진 덮개에 있는 웹 패키지를 사용하여 웹 응용 프로그램을 구축하고 번들입니다.WebPack은 Bazel과 같은 다른 구축 도구로 대체될 수 있습니다. 더 좋은 것이 증명된다면.대부분의 경우 특정한 구축 세부 사항을 맞춤형으로 설정할 필요가 없지만, 우리의 경우 구축 시스템에 연결하는 것이 유익하다.다행히도, 우리는 맞춤형 구축기를 사용하여 웹 패키지 구축을 맞춤형으로 할 수 있다.
@angular-builders/custom-webpack의 도움말 아래, 우리는 논리를 추가하여 밑바닥의 웹 패키지 구축을 확장할 수 있다.

순풍 CSS
Tailwind CSS는 아주 좋은 창고로 유명해진 두통을 없앨 수 있다.내가 CSS에서 필요로 하는 모든 것은 HTML로 정의되어 있으며, 사용하지 않은 스타일은 구축할 때 삭제할 수 있습니다.다른 곳에서 사용할 수 있기 때문에 CSS 클래스를 삭제하는 것이 두려웠던 기억이 납니다.싫어!이 기계는 나를 도울 수 있다.
기본 웹 패키지 설정에 구축 절차를 포함할 수 있도록 Tailwind CSS 도움말 아래 Angular CLI 프로젝트를 설정합니다.@angular-builders/custom-webpack는 Tailwind 루트 파일을 불러오고 다른 공급업체의 접두사로 처리하며 PostCSS 플러그인으로 사용하지 않은 클래스를 삭제합니다.공식 홈페이지PurgeCSS에서 이 과정에 대한 더 많은 정보를 찾을 수 있습니다.
개발 과정에서 느려지지 않도록 생산 구축 기간에만 PurgeCSS 프로세스를 실행하도록 설정합니다.
Tailwind Documentation about Controlling File Size
순풍 CSS를 다른 CSS와 분리
나는 Tailwind를 자신의 파일 ./src/tailwind.scss 에서 분리하는 것이 가장 좋다는 것을 발견했다. Tailwind의 기초, 구성 요소, 실용 프로그램 스타일을 CSS에 직접 넣는 것이 아니라.이런 방식을 통해 나는 사용자 정의 구축을 이 파일만 대상으로 하고 나머지 부분은 그대로 유지할 수 있다. 와 같은 다른 구성 요소 라이브러리를 추가할 수 있으며, 혼합 구축 과정을 걱정할 필요가 없습니다.
우리는 또한 우리가 좋아하는 모든 스타일 시스템(즉 CSS,SCSS,LESS...)을 사용할 수 있다.우리 프로그램에서Tailwind는 정상적으로 작동할 수 있으며, 모든 템플릿에서 사용할 수 있으며, 실제 사용한 스타일만 최종 가방에 넣을 수 있습니다.이 설정으로 모든 구성 요소에서 CSS를 작성할 이유가 있다고 생각하지 않습니다.

If you want to change the default ng generate component component to NOT create the styles file, you can use this command to default to inline styles in your app:

ng config projects.<my-project>.schematics.@schematics/angular:component.inlineStyle true

Angular Material
차리다

각도 항목 작성
Angular CLI가 설치되어 있지 않은 경우 다음을 수행합니다.

npm i -g @angular/cli

새 Angular CLI 프로젝트를 만들려면 다음과 같이 하십시오.

ng new tailwindcss-angular
cd tailwindcss-angular

종속성 설치
프로젝트에 패키지를 설치합니다.

npm i tailwindcss
npm i -D @angular-builders/custom-webpack @fullhuman/postcss-purgecss

순풍 CSS 초기화
순풍을 창조하다.배치하다.다음 명령을 실행하여 js 파일을 만듭니다.

npx tailwind init

이것은 테마, 색, 단점, 간격, 그리고 많은 다른 내용을 가진 Tailwind를 사용자 정의하는 데 사용할 수 있습니다.
다음을 포함하는 새 파일을 만듭니다src/tailwind.scss.

@tailwind base;
@tailwind components;
@tailwind utilities;

구성 프로세스 사용자정의
프로젝트의 루트 폴더에 새 파일extra-webpack.config.js을 만들고 다음을 추가합니다.

const purgecss = require('@fullhuman/postcss-purgecss')({
  // Specify the paths to all of the template files in your project
  content: ['./src/**/*.html', './src/**/*.component.ts'],
  // Include any special characters you're using in this regular expression
  defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || []
});

module.exports = (config, options) => {
  console.log(`Using '${config.mode}' mode`);
  config.module.rules.push({
    test: /tailwind\.scss$/,
    use: [
      {
        loader: 'postcss-loader',
        options: {
          plugins: [
            require('tailwindcss')('./tailwind.config.js'),
            require('autoprefixer'),
            ...(config.mode === 'production' ? [purgecss] : [])
          ]
        }
      }
    ]
  });
  return config;
};

Autoprefixer automatically adds vendor prefixes. Leave it out, if you don't need this.

각도를 구성합니다.json
그리고 이 파일들을 사용해서 angular.json 열고 '프로그래머' 부분을 찾으십시오.ngbuild과ngserve 위젯을 맞춤형으로 만들어야 합니다.
파일을 직접 편집angular.json하거나ngconfig 명령을 사용하여 수행할 수 있습니다.
그래서 너는 두 번을 해야 한다. 한 번은 건설을 위한 것이고, 한 번은 서비스를 위한 것이다.

@angular devkit/build angular를 @angular Builder/custom webpack로 교체

옵션에 customWebpackConfig 경로 추가

구성 부분 변경

ng config projects.<my-project>.architect.build.builder @angular-builders/custom-webpack:browser

ng config projects.<my-project>.architect.build.options.customWebpackConfig.path extra-webpack.config.js

서브 구역 변경

ng config projects.<my-project>.architect.serve.builder @angular-builders/custom-webpack:dev-server

ng config projects.<my-project>.architect.serve.options.customWebpackConfig.path extra-webpack.config.js

순풍까지.스타일 그룹에 scss 파일 추가하기tailwind.scss 경로를 스타일 그룹에 추가하는 것을 잊지 마세요.가장 좋은 것은 angular.json 파일에서 직접 완성하는 것이다.명령을 사용하여 이 동작을 실행하려면, 이것은 그룹의 두 번째 색인에 파일을 추가하거나, 이 슬롯에 설정된 내용을 대체합니다.그러니 어떤 내용도 덮어쓰지 않도록 조심해라.

ng config projects.<my-project>.architect.build.options.styles[1] src/tailwind.scss

각도의 변화를 총결하였다.json
모두 9개의 노선이 영향을 받았다.우리의 모든 변혁의 최종 결과는 다음과 같아야 한다.

"architect": {
  "build": {
    "builder": "@angular-builders/custom-webpack:browser", // ←
    "options": {
      "customWebpackConfig": {            // ←
        "path": "extra-webpack.config.js" // ←
      },                                  // ←
      // ...
      "styles": [
        "src/tailwind.scss",              // ←
        "src/styles.css"
      ],
    // ...
    }
  },
  "serve": {
    "builder": "@angular-builders/custom-webpack:dev-server", // ←
    "options": {
      "customWebpackConfig": {            // ←
        "path": "extra-webpack.config.js" // ←
      },                                  // ←
    // ...
    }
  }
}

테스트
이제 모든 것이 다 준비되었을 것이다.작동 여부를 보려면 Tailwind CSS 클래스의 HTML 대체./src/app.component.html를 사용하거나 다음을 사용합니다.

<div class="max-w-lg mx-auto bg-white shadow-lg rounded-lg overflow-hidden">
  <div class="sm:flex sm:items-center px-6 py-4">
    <div
      class="flex items-center justify-center sm:flex-col sm:w-24 sm:border sm:border-gray-500 sm:rounded-full"
    >
      <img
        class="block sm:mx-auto mx-0 flex-shrink-0 h-16 sm:h-12"
        src="https://angular.io/assets/images/logos/angular/angular.svg"
        alt="Angular Logo"
      />
      <img
        class="block sm:mx-auto mx-0 flex-shrink-0 h-16 sm:h-12"
        src="https://tailwindcss.com/android-chrome-512x512.png"
        alt="Tailwind CSS Logo"
      />
    </div>

    <div class="mt-4 sm:mt-0 sm:ml-4 text-center sm:text-left">
      <p class="text-xl leading-tight">Tailwind CSS & Angular CLI</p>
      <p class="text-sm leading-tight text-gray-600">
        With custom webpack configuration!
      </p>
      <div class="mt-4">
        <button
          class="text-purple-500 hover:text-white hover:bg-purple-500 border border-purple-500 text-xs font-semibold rounded-full px-4 py-1 leading-normal"
        >
          GO
        </button>
      </div>
    </div>
  </div>
</div>

웹 브라우저에서 결과를 보려면 ng serve를 실행하십시오.구축 출력 실행ng build --prod을 보고 dist/tailwindcss-angular/styles.########.css 파일을 봅니다.
순풍 CSS 자동 추가 .이러한 스타일은 파일의 시작 부분에 표시됩니다.
응용 프로그램에서 사용하는 css 클래스만 포함합니다.다른 모든 것은 박리되었다.
normalize.css
요약
우리는 Tailwind CSS를 컴파일하기 위해 몇 가지 간단한 절차를 통해 Angular CLI 프로젝트의 구축 과정을 수정하는 방법을 배웠다.

사용자 정의 패키지,purgecss와tailwindcss 의존항 설치

tailwindcss 초기화 및 생성tailwind.scss 파일

빌드 구성

으로 생성extra-webpack.config.js 파일

조정angular.json

CSS를 쓰지 않아도 각도 구성 요소를 설계할 수 있어서 기쁩니다.