How do I install a template (CSS & JS) with Webpackers in Rails 6?

Question

I am trying to install this theme - Cleopatra - built on Tailwind CSS in my Rails 6 app, but I can't quite make heads & tails of how to do it properly with webpacker.

I am sure this should be fairly straightforward, but I don't use any JS frameworks so I don't quite get webpacker and JS package managers other than knowing they are similar to Bundler and Gemfiles.

I have Tailwind CSS successfully installed, and I have tried a variety of things and all generate errors or don't render successfully.

So I would rather just a step by step approach to installing it.

I am using Rails 6.0.3.6 and Ruby 3.0.1p64.

Edit 1

I have been trying the following guide and this is the error I am getting:

ERROR in ./app/javascript/stylesheets/application.scss (./node_modules/css-loader/dist/cjs.js??ref--6-1!./node_modules/postcss-loader/src??ref--6-2!./node_modules/sass-loader/dist/cjs.js??ref--6-3!./app/javascript/stylesheets/application.scss)
┃ Module build failed (from ./node_modules/postcss-loader/src/index.js):
┃ ReferenceError: window is not defined
┃     at Object. (/ACA/node_modules/apexcharts/dist/apexcharts.common.js:6:345884)
┃     at Module._compile (/ACA/node_modules/v8-compile-cache/v8-compile-cache.js:192:30)
┃     at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
┃     at Module.load (internal/modules/cjs/loader.js:928:32)
┃     at Function.Module._load (internal/modules/cjs/loader.js:769:14)
┃     at Module.require (internal/modules/cjs/loader.js:952:19)
┃     at require (/ACA/node_modules/v8-compile-cache/v8-compile-cache.js:159:20)
┃     at Object. (/ACA/postcss.config.js:5:5)
┃     at Module._compile (/ACA/node_modules/v8-compile-cache/v8-compile-cache.js:192:30)
┃     at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
┃     at Module.load (internal/modules/cjs/loader.js:928:32)
┃     at Function.Module._load (internal/modules/cjs/loader.js:769:14)
┃     at Module.require (internal/modules/cjs/loader.js:952:19)
┃     at require (/ACA/node_modules/v8-compile-cache/v8-compile-cache.js:159:20)
┃     at module.exports (/ACA/node_modules/import-fresh/index.js:28:9)
┃     at loadJs (/ACA/node_modules/cosmiconfig/dist/loaders.js:9:18)
┃     at Explorer.loadFileContent (/ACA/node_modules/cosmiconfig/dist/createExplorer.js:230:12)
┃     at /ACA/node_modules/cosmiconfig/dist/createExplorer.js:252:21
┃  @ ./app/javascript/stylesheets/application.scss 2:26-228
┃  @ ./app/javascript/packs/application.js
┃

This is my app/javascript/packs/application.js:

const images = require.context('../img', true)
const imagePath = (name) => images(name, true)

import "../packs/cleopatra";
import "../stylesheets/application.scss";

// import "apexcharts";
import ApexCharts from 'apexcharts';
window.ApexCharts = ApexCharts; // return apex chart

This is my postcss.config.js:

module.exports = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer'),
    require('apexcharts'),
    require('postcss-import'),
    require('postcss-flexbugs-fixes'),
    require('postcss-preset-env')({
      autoprefixer: {
        flexbox: 'no-2009'
      },
      stage: 3
    })
  ]
}

This is my app/javascript/stylesheets/application.scss:

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
@import "cleopatra";

I have added apexcharts via yarn.

Both of my custom files are app/javascript/stylesheets/cleopatra.css and app/javascript/packs/cleopatra.js.

This is in my application.html.erb:

<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>

Edit 2

I am using webpacker 4.3.0, and you can see what packs/cleopatra.js looks like here.

user_14475852 · Answer

Steps:

cloned cleopatra theme repo locally

git clone https://github.com/moesaid/cleopatra.git moesaid_cleopatra

rails new s_67585007 --no-ri --no-rdoc
rails g controller home index
added root route in config/routes.rb

root 'home#index'

added tailwindcss package with requirements

yarn add tailwindcss@compat postcss@7 autoprefixer@9

postcss.config.js

module.exports = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer'),
    require('postcss-import'),
    require('postcss-flexbugs-fixes'),
    // require('apexcharts'),
    require('postcss-preset-env')({
      autoprefixer: {
        flexbox: 'no-2009'
      },
      stage: 3
    })
  ]
}

7.cp moesaid_cleopatra/dist/js/script.js s_67585007/app/javascript/packs/cleopatra.js

copied style, images and javascript file inside public folder

cp moesaid_cleopatra/dist/{css,img} s_67585007/public

app/views/layouts/application.html.erb



  
    Test67585007
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    
      
    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
  

  
    <%= yield %>
    <%= javascript_pack_tag 'cleopatra', 'data-turbolinks-track': 'reload' %>

copied html from moesaid_cleopatra/dist/index.html pasted in app/views/layouts/home/index.html.erb and adjusted with app/views/layouts/application.html.erb changes can be checked here
app/javascript/packs/application.js

import "../stylesheets/application.scss";

import ApexCharts from 'apexcharts';
window.ApexCharts = ApexCharts; // return apex chart

app/javascript/stylesheets/application.scss

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

then start rails server

Note: You may need to install some extra package has during compilation shows package missing clipboard

How do I install a template (CSS & JS) with Webpackers in Rails 6?

1 Answers