Phoenix 1.5에 Bootstrap 4 및 PurgeCSS 추가

지금 Tailwind가 인기가 있다고 들었는데 개인적으로 별 효과를 보지 못하고 있습니다. 그것은 단지 추가 복잡성을 추가합니다. 처음에는 익숙해지려고 했지만 Bootstrap을 사용하면 훨씬 생산적인 느낌이 들고 간단한 Bootstrap 스타일이 더 좋습니다. 그래서 저는 Bootstrap을 고수하기로 결정했습니다. 그런데 Tailwind를 설정하는 데 this Pragmatic Studio post 도움이 되었습니다.

日本語版

설정 방법은 다음과 같습니다.

1. 부트스트랩 설치

cd path/to/my/phoenix/app
npm install --prefix assets --save-dev bootstrap@4 purgecss-webpack-plugin glob-all

2. 부트스트랩 CSS 가져오기

다음으로 Bootstrap의 CSS를 assets/css/app.scss 파일로 가져와야 합니다.

  /* This file is for your main application css. */
  @import "../node_modules/nprogress/nprogress.css";
+ @import "../node_modules/bootstrap/scss/bootstrap.scss";

3. CSS 제거 구성

이것은 선택적인 단계이지만 설정하기 쉽기 때문에 부트스트랩에서 사용하지 않는 CSS를 제거하는 것이 좋습니다. assets/webpack.config.js 파일을 열고 몇 가지 위치를 수정합니다.

Purge CSS에 여러 파일 이름을 지정해야 하므로 기본값glob-all 대신 glob 을 사용합니다.

필요 purgecss-webpack-plugin

모든 Bootstrap CSS 클래스를 이름으로 참조할 수 있는 파일 경로 배열을 지정합니다. 이 클래스는 Phoenix에서 모두 보기 모듈, 템플릿 파일 및 JavaScript 파일입니다.

  const path = require('path');
- const glob = require('glob');
+ const glob = require('glob-all');
  const HardSourceWebpackPlugin = require('hard-source-webpack-plugin');
  const MiniCssExtractPlugin = require('mini-css-extract-plugin');
  const TerserPlugin = require('terser-webpack-plugin');
  const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
  const CopyWebpackPlugin = require('copy-webpack-plugin');
+ const PurgecssPlugin = require('purgecss-webpack-plugin');

  module.exports = (env, options) => {
    const devMode = options.mode !== 'production';

    return {

      # ...

      plugins: [
        new MiniCssExtractPlugin({ filename: '../css/app.css' }),
        new CopyWebpackPlugin([{ from: 'static/', to: '../' }]),
+       new PurgecssPlugin({
+         paths: glob.sync([
+           '../lib/**/*.ex',
+           '../lib/**/*.leex',
+           '../lib/**/*.eex',
+           './js/**/*.js',
+           './node_modules/some_library/**/*.js',
+         ]),
+       }),
      ]
      .concat(devMode ? [new HardSourceWebpackPlugin()] : [])
    }
  };

또는 프로덕션 모드에서만 Purge CSS를 사용하려는 경우

module.exports = (env, options) => {
  const devMode = options.mode !== 'production';

  return {

    # ...

    plugins: [
      new MiniCssExtractPlugin({ filename: '../css/app.css' }),
      new CopyWebpackPlugin([{ from: 'static/', to: '../' }]),
    ].concat(
      devMode
        ? [
            // development only
            new HardSourceWebpackPlugin(),
          ]
        : [
            // production only
            new PurgecssPlugin({
              paths: glob.sync([
                '../lib/**/*.ex',
                '../lib/**/*.leex',
                '../lib/**/*.eex',
                './js/**/*.js',
                './node_modules/some_library/**/*.js',
              ]),
            }),
          ]
    ),
  }
};

저는 개인적으로 개발과 프로덕션 모두에 적용하는 것을 선호하므로 배포 시 놀라움을 방지할 수 있습니다.

4. 불필요한 Phoenix 기본 CSS 제거

이제 Bootstrap CSS를 사용하므로 표시할 것이 없을 때 플래시 메시지를 숨기는 .alert:empty 이외의 플래시 메시지에 대한 Phoenix 기본 CSS를 제거할 수 있습니다.

- .alert {
-   padding: 15px;
-   margin-bottom: 20px;
-   border: 1px solid transparent;
-   border-radius: 4px;
- }
- .alert-info {
-   color: #31708f;
-   background-color: #d9edf7;
-   border-color: #bce8f1;
- }
- .alert-warning {
-   color: #8a6d3b;
-   background-color: #fcf8e3;
-   border-color: #faebcc;
- }
- .alert-danger {
-   color: #a94442;
-   background-color: #f2dede;
-   border-color: #ebccd1;
- }
- .alert p {
-   margin-bottom: 0;
- }
  .alert:empty {
    display: none;
  }

5. 부트스트랩 변수 재정의(선택 사항)

선택적으로 부트스트랩 변수를 재정의하여 스타일을 사용자 정의할 수 있습니다. 라이브러리의 scss/_variables.scss 파일에서 부트스트랩 변수의 전체 목록을 찾을 수 있습니다.

저는 개인적으로 Phoenix 프로젝트의 assets/css/_variables.scss에 파일을 만들고 재정의하려는 Bootstrap 변수의 일부 섹션을 복사합니다. 아래와 같이 보일 수 있습니다.

@import "../node_modules/bootstrap/scss/functions";

// Custom Variables
// Override Bootstrap variables here.
// https://github.com/twbs/bootstrap/blob/v4-dev/scss/_variables.scss

// Color system

$white:    #fff;
$gray-100: #eceff1;
$gray-200: #cfd8dc;
$gray-300: #b0bec5;
$gray-400: #90a4ae;
$gray-500: #78909c;
$gray-600: #607d8b;
$gray-700: #546e7a;
$gray-800: #455a64;
$gray-900: #37474f;
$black:    #263238;

$grays: ();
// stylelint-disable-next-line scss/dollar-variable-default
$grays: map-merge(
  (
    "100": $gray-100,
    "200": $gray-200,
    "300": $gray-300,
    "400": $gray-400,
    "500": $gray-500,
    "600": $gray-600,
    "700": $gray-700,
    "800": $gray-800,
    "900": $gray-900
  ),
  $grays
);

// https://material.io/resources/color
$blue:    #2962FF;
$indigo:  #304FFE;
$purple:  #AA00FF;
$pink:    #C51162;
$red:     #D50000;
$orange:  #FF6D00;
$yellow:  #FFD600;
$green:   #00C853;
$teal:    #00BFA5;
$cyan:    #00B8D4;

한 가지 중요한 것은 라이브러리 파일에서 부트스트랩 변수를 복사할 때 제거해야 한다는 것입니다 !default . 왜냐하면 우리의 사용자 정의 값은 기본값이 아니라 최종이기 때문입니다.

그런 다음 내 assets/css/app.scss 파일에서 사용자 정의 변수를 가져옵니다.

  /* This file is for your main application css. */
+ @import 'variables';
  @import '../node_modules/nprogress/nprogress.css';
  @import '../node_modules/bootstrap/scss/bootstrap.scss';

6. 사용자 정의 CSS 추가(선택 사항)

  /* This file is for your main application css. */
  @import 'variables';
  @import '../node_modules/nprogress/nprogress.css';
  @import '../node_modules/bootstrap/scss/bootstrap.scss';
+ @import 'my_custom_syles';

그게 다야!