NEW ARTICLE
MySQLのエラー『ER_PARSE_ERROR』の解決方法
  1. HOME
  2. rails
  3. rails6 webpackerでCSSを使う

rails6 webpackerでCSSを使う

  • 作成日 2021.01.20
  • 更新日 2021.01.22
  • rails
rails6 webpackerでCSSを使う

rails6でwebpackerでCSSを使うまでの手順を記述してます。Railsのバージョンは6.1.1を使用してます。

目次

環境

  • OS CentOS Linux release 7.9.2009 (Core)
  • Ruby 2.7.2
  • Rails 6.1.1
  • rbenv 1.1.2-40-g62d7798

webpacker使い方

まずは、「app/javascript/packs」配下に「css」ファイルを配置します。
※ここでは「material-dashboard.css」というファイルを配置してます。

次に同じ階層にあるwebpackのデフォルトのエントリーポイント「application.js」に以下を追記します。

import "packs/material-dashboard.css";

最後に「stylesheet_pack_tag」で「material-dashboard」を指定します。

<%= stylesheet_pack_tag "material-dashboard", media: "all", 'data-turbolinks-track': "reload" %>

webpackerビルド

最後はビルドすれば、完了です。

bin/webpack