yarn의 Rails6밖에 없어요.1+Simpacker+PostCSS+TailwindCSS 환경 만들기

17403 단어 RailsyarnTailwind CSSPostCSSsimpackertech
모조 반도라를 싫어하는 것은 아니다.

TL;DR

  • 다음 기사의 Rails6를 도입합니다.1 프로젝트 시작만 시도
  • Simpacker용 manfest.json의 노드를 출력합니다.js 스크립트를 제작한|북산순도|zen
  • https://zenn.dev/junki555/articles/d57fb6127a3061
  • rails 설정과 docker-compose에서 rails new에 대한 방법을 이번에 생략합니다.다음 내용을 결합해 보세요
    • docker-compose에서 rails new, Rails 61+ 테스트 devise | 기타야마 준야|zen
  • https://zenn.dev/junki555/articles/83339b5d58f416

    • 웹 팩 없이 Simpacker 가져오기


    Gemfile 열기
    Gemfile
    ...(前略)
group :development do
    gem "simpacker"  # group :development do 配下にこれを追記
...(後略)
    앱 컨테이너의 bash(로컬 rails를 설정하면 로컬 단말기)에서
    bundle install
bundle exec rails simpacker:install
...
Simpacker successfully installed 🎉 🍰
    웹 패키지를 삭제합니다.package.제이슨의 devDependencies가 하늘로 날아오르면
    package.json
    package.json
{
  "private": true,
  "devDependencies": {
  }
}
    rails simpacker:install면 npm로 입장
    필요 없는 서류 지우고 다시 해.
    단말기
    rm -rf node_modules/
rm package-lock.json
rm webpack.config.js
yarn install
    여분의 패키지가 없는 Simpacker를 설정할 수 있습니다.
    우리도 같은 일을 하고 있다.
    docker-compose에서 할 때 이쪽에서 프로그램을 쫓기 쉬워요.
    docker-compose에서 rails new, Rails 61+ 테스트 devise | 기타야마 준야|zen
  • https://zenn.dev/junki555/articles/83339b5d58f416

    • TailwindCSS+PostCSS 가져오기


    다음은 터미널입니다.
    yarn add tailwindcss
yarn run tailwindcss init -p
yarn add postcss postcss-cli postcss-import postcss-nested --dev
    postcss.config.제이스를 이렇게 만든 느낌.
    postcss.config.js
    module.exports = {
  plugins: [
    require('postcss-import'),
    require('tailwindcss'),
    require('postcss-nested'),
    require('autoprefixer'),
  ],
}
    우리도 같은 일을 하고 있다.
  • 2010/11판:yarn을 이용하여TailwindCSS+PostCSS의 개발환경 구축|북산순도|zen
  • https://zenn.dev/junki555/articles/4a262d03c58c4e993b95

    • Simpacer용 manifest.json의 노드를 출력합니다.js 스크립트 준비


    이 파일은 항목 바로 아래에 output_manifest_js.js 이름으로 배치됩니다.
    https://gist.github.com/JUNKI555/8f5a3616be630840b65dbb13769c51c3
  • Simpacker용 manfest.json의 노드를 출력합니다.js 스크립트를 제작한|북산순도|zen
  • https://zenn.dev/junki555/articles/d57fb6127a3061

    • package.json에서scripts를 준비합니다.


    이런 느낌이에요.
    package.json
    {
  "private": true,
  "scripts": {
    "cleancss": "rimraf ./public/packs/css/",
    "postcss": "postcss ./app/assets/stylesheets/**/*.css -d ./public/packs/css/",
    "output_manifest": "node output_manifest_js.js public"
  },
  "devDependencies": {
    "autoprefixer": "^10.0.4",
    "rimraf": "^3.0.2",
    "postcss": "^8.1.14",
    "postcss-cli": "^8.3.0",
    "postcss-import": "^13.0.0",
    "postcss-nested": "^5.0.2",
    "tailwindcss": "^2.0.1",
    "yarn-run-all": "^3.1.1"
  }
}
    ※ 이때 손 옆에 있는 패키지.json과devDependencies의 차이가 있는 경우
    위와 같이 편집해서yarn instatall이렇게 사용 가능합니다.
  • yarn cleancss- ./public/packs/css/ 모든 부하를 삭제하고 파일 위치를 변경할 때
  • yarn postcss
  • PostCSS 수송./public/packs/css/을 실행하고 부하
    • 에 출력
  • yarn output_manifest

  • 생성public/packs/manifest.json

    • TailwindCSS를 사용하는 CSS 준비


    app/assets/stylesheets의 부하 등에서 다음과 같은 css를 준비했습니다.
    app/assets/stylesheets/tailwindcss.css
    /* tailwindcss の class を全て有効にするcss。開発中は便利。 */
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
    app/assets/stylesheets/application.css
    nav {
　/* @apply で tailwiindcss の class をまとめて割り当てられる */
  @apply py-2 border-b-4 border-pink-400;

  .nav-button {
    @apply h-12 px-3 py-2 m-2 text-indigo-100 transition-colors duration-150 bg-indigo-700 rounded-lg hover:bg-indigo-800;
  }
}
    또한 rails의erb도 css에 닿을 수 있습니다.
    app/views/home/index.html.erb
    <h1 class="m-2 w-3/12 border-8 border-pink-400">Home#index</h1>
<p>Find me in app/views/home/index.html.erb</p>
    link_to 같은 거 이런 느낌.
    <%= link_to "リンクの文言", "パス", class: "クラス名" %>
  • Rails link_to 메서드 | Qita 정보
  • https://qiita.com/STHEXA/items/aa6a5af6cfbdc7b751a3

    • stylesheet_pack_CSS를 tag로 읽기


    예를 들어 app/views/layouts/application.html.eb한테 이런 느낌을 줘요.stylesheet_pack_tag를 사용하여 상기 준비한 css를 읽습니다.
    app/views/layouts/application.html.erb
    <!DOCTYPE html>
<html>
  <head>
    <title>App</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_pack_tag "application", media: "all" %>
    <%= stylesheet_pack_tag "tailwindcss", media: "all" %>
  </head>

  <body>
    <%= yield %>
  </body>
</html>
    사용stylesheet_pack_tag 도우미
    준비된 public/packs/manifest.json 에서 이 파일에 대한 링크를 생성합니다.
  • simpacker/lib/simpacker/helper.rb | hokaccha/simpacker | GitHub
  • https://github.com/hokaccha/simpacker/blob/226219eedb0188c3789dd5d02f4e6d26777836f3/lib/simpacker/helper.rb#L29

    • PostCSS 전송 실행


    나머지는 css를 적당히 편집해서 매번 연결합니다.
    단말기
    yarn postcss
yarn output_manifest
    변압기를 실시할 때마다 귀찮은 사람
    package.json
        "postcss": "postcss ./app/assets/stylesheets/**/*.css -d ./public/packs/css/",
    여기에 -w 옵션을 더해서 워치를 하면 되죠.
    (나는 매번 내가 연결하는 것을 좋아한다.)

    이렇게 하면 오케이!운전해 보세요.


    예를 들어 devise의 습작을 이런 느낌으로 매치하면 겉모습이 이렇게 변한다.
    이것이 바로

    이런 느낌!

    버튼의 외관 관계는 이곳을 참고했다.TailwindCSS는 편리합니다.
  • Buttons | Tailwind CSS Starter Kit
  • https://tailwind-starter-kit.now.sh/docs/buttons

    • 보충: ERB에서도 TailwindCSS의 VScode 확장 기능 사용


    Setting.json에 다음과 같은 내용을 추가하여 eb를 〃로 해석하면 OK입니다.
    설정한 후 VSCODE를 다시 시작하는 것을 잊지 마십시오.
    Setting.json
        "files.associations": {
        "*.html.erb": "html"
    }
  • VScode를 통해 특정 파일을 언어와 연결|Qiita
  • https://qiita.com/rog-works/items/a61d66fad5ecf03e6f23
  • Not working in rails project (.erb files) | Issue #87 | tailwindlabs/tailwindcss-intellisense
  • https://github.com/tailwindlabs/tailwindcss-intellisense/issues/87

    • 총결산


    작은 프로젝트라면 웹 패키지 설정보다 간단해서 좋아해요.
    이번 창고는 여기 있습니다.
    https://github.com/JUNKI555/rails_authentication_practice01
    LCS+LIS
    HDU 4389 X mod f(x) 디지털 dp

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

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