我一直在尝试不使用
webpacker
,而是使用 css-bundling
和 js-bundling
的新 Rails 解决方案。 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 命令
谢谢!
这个答案可能不完整或完全毫无价值,并且绝对感觉像是我不想维护的东西,但以下步骤似乎是实现这项工作的路径:
注意:我使用 Bootstrap 而不是 Tailwind,但它应该有点相同。
npm-run-all
包以运行多个脚本:yarn add npm-run-all
// 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
我已在 Rails 项目中成功配置了最新稳定版本的 Active Admin。这是对我有用的设置:
宝石文件:
gem 'activeadmin', '~> 3.2'
gem 'propshaft'
gem 'cssbundling-rails'
gem 'jsbundling-rails'
使用此配置:
应用程序/javascript/active_admin.js:
import './add_jquery'
import 'jquery-ui'
import "jquery-ujs"
import 'jquery-ui/ui/unique-id.js'
import 'jquery-ui/ui/widgets/mouse'
import "jquery-ui/ui/widgets/sortable"
import "jquery-ui/ui/widgets/tabs"
import "jquery-ui/ui/widgets/dialog"
import 'jquery-ui/ui/widgets/datepicker'
import 'jquery-ui/ui/widget'
import '@activeadmin/activeadmin'
package.json:
"dependencies": {
"@activeadmin/activeadmin": "^3.2.0",
"jquery": "^3.7.1",
"jquery-ujs": "^1.2.3"
}