如何在 Rails 6 中使用 Webpackers 安装模板（CSS & JS）？

Question

我正在尝试在我的 Rails 6 应用程序中安装 this theme - Cleopatra - built on Tailwind CSS，但我不太清楚如何使用 webpacker 正确地完成它。

我相信这应该相当简单，但我不使用任何 JS 框架，所以我不太了解 webpacker 和 JS 包管理器，只是知道它们类似于 Bundler 和 Gemfiles。

我已经成功安装了 Tailwind CSS，我尝试了很多东西，但都产生了错误或没有成功呈现。

所以我宁愿一步一步地安装它。

我正在使用 Rails 6.0.3.6 和 Ruby 3.0.1p64。

编辑 1

我一直在尝试 the following guide，这是我遇到的错误：

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.<anonymous> (/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.<anonymous> (/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
┃

这是我的 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

这是我的 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
    })
  ]
}

这是我的 app/javascript/stylesheets/application.scss:

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

我通过 yarn 添加了 apexcharts。

我的两个自定义文件都是 app/javascript/stylesheets/cleopatra.css 和 app/javascript/packs/cleopatra.js。

这是我的 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' %>

编辑 2

我用的是webpacker 4.3.0，大家可以看看packs/cleopatra.jslooks like here.

Answer 1

步骤：

在本地克隆埃及艳后主题回购

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

rails new s_67585007 --no-ri --no-rdoc
rails g controller home index
在 config/routes.rb

root 'home#index'

添加了符合要求的 tailwindcss 包

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

已复制样式、图像和 javascript 文件到 public 文件夹

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

app/views/layouts/application.html.erb

<!DOCTYPE html>
<html>
  <head>
    <title>Test67585007</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <link rel="stylesheet" href="https://kit-pro.fontawesome.com/releases/v5.12.1/css/pro.min.css">
    <link rel="stylesheet" type="text/css" href="css/style.css">  
    <%= 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' %>
  </head>

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

从 moesaid_cleopatra/dist/index.html 复制 html 粘贴到 app/views/layouts/home/index.html.erb 并用 app/views/layouts/application.html.erb 调整更改可以检查 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";

然后开始rails server

注意：您可能需要安装一些额外的包在编译过程中显示包丢失clipboard

如何在 Rails 6 中使用 Webpackers 安装模板（CSS & JS）？

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

ruby-on-rails

webpack

ruby-on-rails-6