Ruby on Rails 프론트엔드 빠른 프레임워크 CSS Classless 또는 Class-Light com CDN-CSS 튜토리얼-php.cn

Ruby on Rails 프론트엔드 빠른 프레임워크 CSS Classless 또는 Class-Light com CDN

Patricia Arquette

풀어 주다： 2025-01-23 02:17:08

원래의

311명이 탐색했습니다.

Ruby on Rails Frontend Rápido com Frameworks CSS Classless ou Class-Light com CDN

새 Rails 앱 만들기

time 명령은 rails serve 명령이 실행된 후의 실행 시간을 표시합니다. 다음 예에서는 47초의 실행 시간을 보여줍니다.

$ rails -v
Rails 8.0.0

$ time rails new classless-css-cdn
...
real    0m47.500s
user    0m33.052s
sys     0m4.249s

로그인 후 복사

Rails 8은 "빌드가 필요하지 않음" 철학을 기반으로 기본적으로 Propshaft를 리소스 파이프라인 라이브러리로 사용하고 Importmap을 JavaScript 라이브러리로 사용합니다. Importmap은 JavaScript로 아무 작업도 수행하지 않습니다.

VSCode 또는 선호하는 편집기를 사용하여 프로젝트를 엽니다

$ cd classless-css-cdn && code .

로그인 후 복사

HTML 요소의 스타일을 볼 수 있는 페이지 만들기

이 페이지는 시리즈 첫 번째 기사의 '일반 단계' 섹션에 있습니다.

`app/views/layouts/application.html.erb` 파일을 다시 열고 CDN을 통해 클래스 없는 CSS 스타일을 참조하세요

더 확대…

- 후에

로그인 후 복사

, </head> 앞에 다음을 붙여넣으세요. 이러한 스타일을 모두 사용할 필요는 없으며 다양한 옵션을 테스트할 수 있도록 추가되었습니다.


     <!-- 不同浏览器之间可能存在不同的边距或字体 -->

    <link href="https://cdn.jsdelivr.net/npm/normalize.css" rel="stylesheet"></link><link href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css" rel="stylesheet"></link> %>
      %>



     %>



     %>



     %>



     %>



     %>



     %>



     %>




    <link href="https://unpkg.com/sakura.css/css/sakura.css" media="screen" rel="stylesheet"></link><link href="https://unpkg.com/sakura.css/css/sakura-dark.css" media="screen and (prefers-color-scheme: dark)" rel="stylesheet"></link> %>



     %>

로그인 후 복사

Normalize CSS 및 Pico CSS를 제외한 대부분의 스타일은 주석 처리되어 있습니다.
파일을 저장하고 페이지를 새로 고치거나 서버를 다시 시작하세요.
Pico CSS와 다른 스타일을 테스트하려면 스타일 CDN(예: <link href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css" rel="stylesheet"></link>)을 설정하는 줄을 주석 처리하고 Simple CSS 줄과 같은 다른 스타일에 대한 줄의 주석 처리를 해제하세요.
VSCode에서 줄에 주석을 달거나 주석 처리를 해제하려면 단축키 Ctrl K C를 사용할 수 있습니다.

CDN 기반 클래스 없는 CSS 프레임워크를 사용하여 HTML 스타일을 지정하시겠습니까?

위 스타일시트를 저장하고 Rails 서버를 시작하면 선택한 클래스 없는 CSS 프레임워크를 사용하여 HTML 스타일이 지정된 것을 볼 수 있습니다.

다크 모드

일부 스타일에는 어두운 모드 옵션이 있습니다. 확인하려면 컴퓨터의 색상 개인화 설정에서 테마를 변경하세요. Windows에서 "앱에 대해 어두운 모드 활성화"를 검색하고 어두운 모드와 밝은 모드 간에 전환합니다. 운영 체제 설정을 변경한 후 HTML 페이지는 라이트 모드와 다크 모드를 지원함을 나타내기 위해 자동으로 변경되어야 합니다.

다음 단계

[-] 원하는 대로 스타일을 구성하세요. [-] CDN을 사용하지 않고 프로젝트에서 CSS 파일을 사용하여 스타일을 지정합니다. [-] Rails Live Reload를 사용하여 브라우저에서 프로젝트의 변경 사항을 동적으로 업데이트합니다. [-] 프런트 엔드에서 더 많은 시간을 보내고 싶다면 좋아하는 스타일에 대한 사용자 정의 옵션을 확인하세요. [-] Tailwind를 사용하여 클래스 없는 CSS 프레임워크의 기능을 복제하세요.