css-bundling gem + Tailwind CSS with ActiveAdmin

Question

我一直在尝试没有webpacker 的新Rails 解决方案，但使用css-bundling 和js-bundling。 css-bundling 带有一些“预先选择”，例如 TailwindCSS。

安装时，将资产管道中的构建 css 步骤与 package.json 中的命令链接起来，就像 package.json 中的这样：

"build:css": "tailwindcss -i ./app/assets/stylesheets/application.tailwind.css -o ./app/assets/builds/application.css"

这可以正常工作。

现在问题来了。我正在使用 ActiveAdmin gem，它使用以下代码创建 active_admin.scss 文件：

@import "active_admin/mixins";
@import "active_admin/base";

问题是，如果我尝试使用 TailwindCSS 作为预处理器编译这个 CSS，它无法找到导入：

tailwindcss --postcss -i app/assets/stylesheets/active_admin.sass.scss -o active_admin.css --trace-warnings
(node:52651) UnhandledPromiseRejectionWarning: Error: Failed to find 'active_admin/mixins'
  in [
    .../app/assets/stylesheets
  ]
    at .../node_modules/postcss-import/lib/resolve-id.js:35:13
    at async LazyResult.runAsync (.../tailwindcss/peers/index.js:57896:11)
(Use `node --trace-warnings ...` to show where the warning was created)

所以我假设无法在 gems 中找到所需的 CSS。问题是：你知道如何告诉 css-bundling 将 CSS 定位在不同的地方吗？我还假设 sprockets 足够聪明，但我不知道如何处理 package.json 中的 css-bundling + build:css 命令

谢谢！

Answer 1

这个答案可能不完整或完全一文不值，而且肯定感觉像是我不想维护的东西，但下面的步骤似乎是完成这项工作的路径：

注意：我使用的是 Bootstrap 而不是 Tailwind，但应该有点相同。

1. 安装npm-run-all 包以运行多个脚本：

yarn add npm-run-all

1. 文件设置：

// package.json

  "scripts": {
    "build:js": "npm-run-all --parallel \"build:js:* {@}\" --",
    "build:js:application": "esbuild app/javascript/application.js --bundle --sourcemap --outfile=app/assets/builds/application.js",
    "build:js:active_admin": "esbuild app/javascript/active_admin.js --bundle --sourcemap --outfile=app/assets/builds/active_admin.js",
    "build:css": "npm-run-all --parallel \"build:css:* {@}\" --",
    "build:css:application": "sass ./app/assets/stylesheets/application.bootstrap.scss ./app/assets/builds/application.css --no-source-map --load-path=node_modules",
    "build:css:active_admin": "sass ./app/assets/stylesheets/active_admin/active_admin.scss ./app/assets/builds/active_admin.css --no-source-map --load-path=node_modules"
  }

// packages/jquery.js

import jquery from 'jquery';
window.jQuery = jquery;
window.$ = jquery;

// app/javascript/active_admin.js

import './packages/jquery.js' // position for hoisting
import '@activeadmin/activeadmin/app/assets/javascripts/active_admin/base.js';

// app/assets/stylesheets/active_admin/active_admin.scss

@import "@activeadmin/activeadmin/src/scss/mixins";
@import "@activeadmin/activeadmin/src/scss/base";

# Procfile.dev

web: bin/rails server -p 3000
js: yarn build:js --watch
css: yarn build:css --watch