소개

Ruby on Rails, Vue.js로 시작하는 현대 웹 애플리케이션 시작에서는 ActiveAdmin을 도입했기 때문에 기본 설정을 적용한 후 응용 프로그램 전체에 동일한 CSS 스타일이 적용되었습니다.

이번 ActiveAdmin 스타일은 전체 응용 프로그램에 적용하지 않고 ActiveAdmin이 관리하는 페이지에만 적용되며 전체 응용 프로그램에서는 bootstrap을 사용하기로 결정합니다.

ActiveAdmin 스타일을 ActiveAdmin 관리 페이지에만 유지

원래 응용 프로그램 전체에 ActiveAdmin 스타일이 적용되는 이유는 app/assets/stylesheets/active_admin.scss이 app/assets/stylesheets/application.scss인 *= require_tree .에 의해 로드되기 때문입니다.

이를 방지하는 방법은 ActiveAdmin 공식 페이지에 설명된 대로 active_admin.scss를 app/assets/stylesheets/에서 vendor/assets/stylesheets/으로 이동하기로 결정합니다.

이제 ActiveAdmin에서 관리하는 employee 모델의 관리 페이지는 스타일 그대로 유지되며 응용 프로그램 페이지(예: http://localhost:3000/)는 ActiveAdmin의 스타일이 맞지 않습니다.

bootstrap 설치

그런 다음 bootstrap을 설치합니다.

webpacker를 사용하기 때문에 yarn 명령을 사용하여 bootstrap을 설치합니다.
또한 bootstrap에서 사용하는 jQuery, popper.js도 설치합니다.

bootstrap,jQuery,popper.js 설치

$ yarn add bootstrap jquery popper.js

다음에 bootstrap 의 로드를 JS, CSS 각각 실시합니다.

app/javascript/packs/application.js

  : <snip>
import 'bootstrap/dist/js/bootstrap'

app/javascript/packs/vue_sample_app.css

@import 'bootstrap/dist/css/bootstrap'

또한 webpack에서 jQuery, popper.js를 플러그인으로 추가합니다.

config/webpack/environment.js

const { environment } = require('@rails/webpacker')
  : <snip>
// Use bootstrap (with jquery, popper.js)
const webpack = require('webpack')
environment.plugins.append(
    'Provide',
    new webpack.ProvidePlugin({
        jQuery: 'jquery/dist/jquery',
        Popper: 'popper.js/dist/popper'
    })
)

module.exports = environment

이것으로 bootstrap의 도입은 끝입니다.

나중에 각 페이지에 bootstrap을 사용하여 스타일을 적용합니다.
※ bootstrap 을 사용한 코드는 상세를 생략합니다. 자세한 내용은 GitHub 페이지을 참조하십시오.


TOP 화면
Delete 버튼을 누를 때







신규 작성 화면
상세 화면

이 기사에 대한 의견을 받아 수정한 역사와 감사

2019/07/17 yuuna 씨가 "ActiveAdmin 스타일을 ActiveAdmin 관리 페이지에만 넣는다"에 쓰여진 active_admin.scss 의 이동처 디렉토리가 잘못되었다고 지적을 수정했습니다.