Rails-7 및 Vite에 Foundation-Sites 설정

메모

Foundation/sass는 HMR을 약 12초 정도 느리게 합니다. 따라서 node_modules/에서 sass 파일을 심볼릭 링크하여 Foundation용 자산 파이프라인을 사용하므로 Vite가 이들로부터 해방됩니다. 가장 많이 변경되는 사용자 지정 스타일시트는 프런트엔드 폴더에 있습니다. Javascript는 원사(node_modules/) 패키지에서 Vite로 바로 이동합니다.

전제 조건

초대

$ yarn add foundation-sites

application.js

import 'foundation-sites'

import $ from 'jquery'; //=> ATTENTION: jQuery has to be imported after foundation. Foundation would not need this, it would be satisfied with the settings in vite.config.js
window.$ = $;

// initialize the page
$(document).on('turbo:render', function() {
    onPageLoad();
});
$(document).ready(function () {
    onPageLoad();
});

function onPageLoad() {
    // init foundation
    $(document).foundation();
    console.log('foundation ready')
}

=> Javascript가 작동해야 합니다. 브라우저/개발/콘솔에 foundation ready가 표시되어야 합니다.

자산 파이프라인

추가app/assets/stylesheets/_settings.scss기초 구성을 위한 커스텀 sass 변수

폴더 생성app/assets/stylesheets/foundation/
inside /app/assets/stylesheets/foundation/ 에서 다음과 같이 기본 스타일시트를 복사합니다.

$ cp -r ../../../../node_modules/foundation-sites/scss .
$ cp -r ../../../../node_modules/foundation-sites/_vendor .

더 똑똑하면 복사를 심볼릭 링크하는 것입니다. 그러나 적어도 제 경우에는 git 심볼릭 링크를 폴더로 전송하지 않습니다(파일에 대한 심볼릭 링크와 달리). 따라서 .gitignore로 제외하고 서버에서 배포 작업(제 경우에는 capistrano)으로 다시 추가해야 합니다. 그래서 더 쉬운 방법이 있습니다.
app/assets/stylesheets/application.scss//= require tree 및 //= require . 행이 제거되었는지 확인하십시오.

@import "settings";
@import "./foundation/scss/foundation";
@include foundation-everything()

이유를 알 수는 없지만 @import를 노드 폴더로 직접 참조할 수 없었기 때문에 이러한 심볼릭 링크를 수행해야 했습니다.

형세
stylesheet_link_tag "application"가 있는지 확인하십시오.

테스트 보기
.haml

%button.button{"data-toggle" => "example-dropdown", :type => "button"} Toggle Dropdown
#example-dropdown.dropdown-pane{"data-auto-focus" => "true", "data-dropdown" => ""}
  Example dropdown.

.html.erb

<button class="button" data-toggle="example-dropdown" type="button">Toggle Dropdown</button>
<div class="dropdown-pane" data-auto-focus="true" id="example-dropdown">
  Example dropdown.
</div>

=> Popover가 작동하고 다음과 같이 표시되면 Foundation 스타일과 javascript가 제대로 작동하는 것입니다.



추신.:

심볼릭 링크 SASS 변수

내부frontend/stylesheets/에서 다음과 같이 심볼릭 링크를 만듭니다.

$ ln -s ../../assets/stylesheets/_settings.scss .

그런 다음 모든 스타일시트에서 예를 들어 frontend/stylesheets/components/button.scss 다음과 같이 가져옵니다.

@import '../settings';