Rails 6 어플리케이션 + TailwindCSS를 배치하여 자극을 줍니다.js와 사용자 정의 글꼴.

8069 단어 tailwindcssrailsjavascript
이 글은 새로운 Rails 6 응용 프로그램을 설정하여 사용하는 방법Tailwind CSS을 소개한 다음에 사용자 정의 글꼴을 설정하고 Heroku에 배치할 때 전체 프로그램이 진정으로 작동하도록 하는 방법을 소개한다.
Rails 기술을 6으로 업그레이드하지 않았다면 놀라움을 준비하세요: Rails 6는 현대 JS 프레임워크와 완벽하게 조화롭게 사용할 수 있습니다.자산관도 있지만 자바스크립트의 열성 때문에 이미 버려졌다.
첫 번째 단계도 가장 중요한 단계는 잘못된 강좌를 선택하지 않는 것이다. 그렇지 않으면 인생의 길은 좌절과 고통으로 가득 찰 것이다.처음에 Vue를 실행하려고 했습니다.나는 이것이 가장 어려운 통합이 될 것이라고 생각한다.구글에서 "Rails 6 Vue js"를 검색한 것을 시작으로 이것How to Integrate Vue.js with Rails 6
을 찾았습니다. 여러 차례의 시도와 오류를 거쳐 Tailwind를 통합했습니다.
그래서 나는 나무에 앉아서 Rails6, Vue, Tailwind를 가지고 있었다.불행하게도, 나는 Heroku에서 끊임없이 번역 오류를 얻었지만,localhost에는 없었다.빌어먹을!
그래서 며칠 동안 이 문제를 헛되이 디버깅하고 다시 생각해 본 후에 나는 내가 알고 있는 것을 견지하고 레일스를 작성한 사람이 제정한 원칙에 따라 착색하는 것이 좋겠다는 것을 깨달았다. 레일스가 주요하고 Stimulus.js'jQuery와 유사하지만 중요한 것, 예를 들어 밑에 있는 목록을 터치하는 것이다.

그만해, 코드 좀 보여줘!


네, 시작합시다.
  • 현재 작업 디렉터리rails new <appname의 현재 rails/ruby를 사용합니다.
  • 사용rails webpacker:install:stimulus 설치 자극 (아래 동영상 참조: How to use Javascript via webpacker in Rails 6 (and Flatpickr) 우수 강좌를 얻기 위해)

  • app/javascript/packs/application.js는 낡은 자산 파이프와 매우 비슷하다.이 코드를 추가하려면:
    import "controllers"
import flatpickr from "flatpickr"

require("flatpickr/dist/flatpickr.css")
    첫 번째 줄은 자극 컨트롤러를 설정하고 다음 줄은 FlatPicker를 설정합니다.그리고 이 코드:
    document.addEventListener("turbolinks:load", () => {
  flatpickr("[data-behavior='flatpickr']", {
    altInput: true,
    altFormat: "F j, Y",
    dateFormat: "Y-m-d",
  })
})
    flatpickr를 사용하여 어떤 HTML 태그를 초기화해야 하는지, flatpickr의 입력과 표시 날짜 형식을 설정해야 합니다.
    rails 프로젝트에flatpicker를 추가하는 것을 잊지 마십시오: yarn add flatpickr.
    [사소한 문제: yarn 또는 npm을 선택하고 끝까지 견지하라. 그렇지 않으면 결국 yarn.lock와 package-lock.json 파일을 얻어 너package.json의 통제권을 쟁탈할 것이다. 나쁜 생각이다. 이 프로젝트에 대해 나는 yarn을 선택하고 이것을 npm를 yarn으로 번역하는 비적을 추천한다. NPM vs Yarn Cheat Sheet]
    이제 보기에서 FlatPicker의 작업 상황을 볼 때가 되었습니다.보기를 만들고 form.date_select 로 바꾸면 더 좋은 작업 보기가 있어야 합니다.

    그나저나 Rails 6는 새로운 형식의 문법을 사용한 것 같다. 낡은 것보다 간결하고, Tailwind 클래스를 추가할 때 더욱 쉽게 처리하기를 바란다.
    지금은 Heroku에서 당신의 프로젝트를 견지하기에 좋은 시기입니다.Heroku는 AWS를 통해 배포할 것을 알지 않는 한 손쉽게 배포하고 관리할 수 있습니다.이 글을 읽으십시오Getting Started on Heroku with Rails 6.x.복습이 필요하다면

    TailwindCSS 구현


  • 네가 하나 만들어야 한다form.text_field :publish)date, date, { behavior: "flatpickr"}.왜 최신이야?네가 원하기 때문이다latest stable build of TailwindCSS.현재 프로젝트에 TailwindCSS가 있지만 통합되지 않았습니다.Rails 6 프로젝트에서 Tailwind를 사용해야 한다는 점을 기억하려면 Tailwind Install instructions 를 시작해야 합니다.전체 컨텍스트를 원하는 경우 GoRailsHow to install TailwindCSS 1.0 with Rails 6를 참조하십시오
  • 완료yarn add tailwindcss@latest 후 yarn add tailwindcss 폴더에 새 stylesheets 디렉터리를 만들고 이 디렉터리에 javascript 파일을 만들어서 Tailwind 구성을 저장해야 합니다.
    • @import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
  • 에서 application.scss 및 다음 행postcss.config.js이 필요합니다.
  • 그리고 한 걸음 더: 이 새로운 것에 대해 웹 페이지에 알려주세요require('tailwindcss').require('authoprefixer')에서 application.scss 선언을 사용합니다.
  • 현재 tailwindCSS를 사용해야 합니다.이를 실현하려면 간단하게 네비게이션 표시줄here을 복사하여 application.js에 추가할 수 있다.
  • Rails 프로젝트의 모든 것을 정상적으로 작동시켜야 합니다. CLIrequire("stylesheets/application.scss")에서 웹 팩을 실행하여 빠른 테스트를 하고 localhost에서 실행해 보십시오.

    • Rails 6 응용 프로그램에 사용자 정의 글꼴 설치


    이 강좌에서 소개하고 싶은 마지막 단계로, 다음은 사용자 정의 글꼴을 사용하는 데 필요한 절차입니다.Gone은 /layout/application.html.erb 레이블에서 CDN을 선언하거나 자산 파이프라인에 글꼴 세트를 포함합니다.Javascript 방식이 더 간단합니다.
  • npm 모듈로 된 글꼴을 npmjs.com에서 찾습니다.대부분의 글꼴 npm 모듈은 bin/webpack로 시작하기 때문에 당신이 좋아하는 Roboto, 또는 Nunito, 또는 좋은 Inter 글꼴을 선택하십시오.그런 다음 프로젝트에 추가합니다.예를 들어 <head>
  • 이제 세 군데에서 테일윈드에게 이 글꼴에 대한 정보를 알려줘야 한다.먼저 npm 모듈을 포함하여 파일interface-을 편집합니다.
    • require("channels")
require('typeface-inter')

require("stylesheets/application.scss")
  • 다음에 root of your project에서 yarn add 'typeface-inter' 파일을 생성합니다 (npm와 달리 npx는 application.js 파일을 생성하지 않기 때문에 이 파일을 사용하십시오.)
  • 수정tailwind.config.js:
    • module.exports = {
  theme: {
    fontFamily: {
      body: ['inter']
    },
    extend: {},
  },
  variants: {},
  plugins: [],
}
  • 마지막으로 응용 프로그램에 들어가십시오.scss 파일 및 apply the font to the html tag, 따라서 적용package-lock.json:
    • @import "tailwindcss/base";
html {
  @apply font-body;
}
@import "tailwindcss/components";
@import "tailwindcss/utilities";
    (스콧 워터마시스크(Scott Watermasysk)와 "Using Google Fonts Tailwind CSS" 친절하게 설명해 주셔서 감사합니다.감사합니다 스콧!(겸사겸사 한마디 하자면, 그의 How I VSCode 항목을 봐라.)

    배달


    Rails는 다시 한 번 자신을 훌륭한 서버 응용 프로그램으로 개조했습니다. 또한 모든javascript npm 모듈과 프레임워크의 용기입니다. 크기와 상관없이 사용하고 싶을 수도 있습니다.
    이것은 jQuery를 잘 알지만 npm 모듈에 헷갈린 Rails 개발자와 느슨한 자바스크립트를 실행하는 모든 사람들이 이를 악물고 Rails6를 배우고 사용하기 시작해야 한다는 것을 의미한다.
    웹 패커가 어떻게 js를 rails 응용 프로그램에 통합하는지 깨닫게 되면 모든 것이 의미가 있게 변하기 시작하고 자산 파이프의 고통스러운 해결 방법을 거의 잊어버릴 수 있다.
    방금 지적한 바와 같이, TailwindCSS는 처음에 Bootstrap보다 더 큰 패키지였지만, 프로젝트에 tailwind.config.js 를 쉽게 추가할 수 있습니다. 이렇게 하면 생산을 추진할 때 사용하지 않은 TailwindCSS 클래스가 모두 삭제됩니다.결과는 어떻습니까?ultrasmall과 ultrasleek css 파일입니다.
    마지막으로 개발자 정보의 유통기한은 현재 심지어 더 짧다.6개월이 넘는 튜토리얼, 동영상, 댓글은 의심스럽다.나이가 1년이 넘으면 믿을 수 없다.이것은 당신이 다음 큰 것을 구축하려고 하지 않도록 멋진 SaaS를 찾아서 그것을 해결하는 커다란 불만족스러운 요구이다.
    PARSEPATH
    easyui-combogrid의 하단 데이터 선택을 취소하는 방법

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage