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

Question

我正在尝试在我的 Rails 6 应用程序中安装 this theme - Cleopatra - built on Tailwind CSS，但我无法完全了解如何使用 webpacker 正确执行此操作。

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

我已成功安装 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

步骤：

1. 本地克隆埃及艳后主题库

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

1. rails new s_67585007 --no-ri --no-rdoc
2. rails g controller home index
3. 在config/routes.rb 中添加了根路由

root 'home#index'

5. 添加了带有要求的 tailwindcss 包

yarn add tailwindcss@compat postcss@7 autoprefixer@9

6. 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

8. 在公共文件夹中复制样式、图像和 javascript 文件

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

9. 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>

10. 从moesaid_cleopatra/dist/index.html 复制的html 粘贴到app/views/layouts/home/index.html.erb 并使用app/views/layouts/application.html.erb 进行调整可以检查更改here
11. app/javascript/packs/application.js

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

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

12. app/javascript/stylesheets/application.scss

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

然后开始rails server

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