我开始了一个新的Rails项目,并试图让它顺风运行。
我希望能够有顺风css文件分离的组织原因。
我的Gemfile
中的相关宝石:
gem "sprockets-rails"
gem "importmap-rails"
gem "tailwindcss-rails"
字符串
我运行bin/importmap pin postcss-import
,它向我的config/importmap.rb
文件添加了一堆引脚。
我会假设这将允许从应用程序内部的JS文件访问这些节点模块?所以在config/tailwind.config.js
中我有这个:
module.exports = {
// which files tailwind can access https://tailwindcss.com/docs/content-configuration
content: [
'./public/*.html',
'./app/helpers/**/*.rb',
'./app/javascript/**/*.js',
'./app/views/**/*.{erb,haml,html,slim}',
'./app/views/**/*'
],
plugins: [
require("postcss-import"),
require('@tailwindcss/forms'),
require('@tailwindcss/aspect-ratio'),
require('@tailwindcss/typography'),
require('@tailwindcss/container-queries'),
]
}
型
对于我的CSS,我有app/assets/stylesheets/application.tailwind.css
,看起来像这样:
@tailwind base;
@tailwind components;
@tailwind utilities;
@import "tailwind/font"
型
我还有一个app/assets/stylesheets/tailwind/font.css
,看起来像这样:
@layer base {
h1 {
@apply 2xl;
}
h2 {
@apply h2;
}
}
型
然而,当我去构建CSS(通过bin/dev
)时,我得到了这个错误:
18:00:48 css.1 | Rebuilding...
18:00:48 css.1 | Error: Cannot find module 'postcss-import'
18:00:48 css.1 | Require stack:
18:00:48 css.1 | - /home/zifnab/projects/my_project/config/tailwind.config.js
18:00:48 css.1 | at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)
18:00:48 css.1 | at Function._resolveFilename (pkg/prelude/bootstrap.js:1955:46)
18:00:48 css.1 | at Function.resolve (node:internal/modules/cjs/helpers:108:19)
18:00:48 css.1 | at _resolve (/snapshot/tailwindcss/node_modules/jiti/dist/jiti.js:1:250334)
18:00:48 css.1 | at jiti (/snapshot/tailwindcss/node_modules/jiti/dist/jiti.js:1:252917)
18:00:48 css.1 | at /home/zifnab/projects/my_project/config/tailwind.config.js:112:5
18:00:48 css.1 | at evalModule (/snapshot/tailwindcss/node_modules/jiti/dist/jiti.js:1:255614)
18:00:48 css.1 | at jiti (/snapshot/tailwindcss/node_modules/jiti/dist/jiti.js:1:253542)
18:00:48 css.1 | at /snapshot/tailwindcss/lib/lib/load-config.js:37:30
18:00:48 css.1 | at loadConfig (/snapshot/tailwindcss/lib/lib/load-config.js:39:6) {
18:00:48 css.1 | code: 'MODULE_NOT_FOUND',
18:00:48 css.1 | requireStack: [
18:00:48 css.1 | '/home/zifnab/projects/my_project/config/tailwind.config.js'
18:00:48 css.1 | ]
18:00:48 css.1 | }
型
这表明importmaps目前在这个构建步骤中无法包含postcss-import
模块.
1条答案
按热度按时间oipij1gg1#
你正在使用
tailwindcss-rails
gem,它使用standalone tailwind可执行文件。Postcss已经是build的一部分,你可以删除它:字符串
你的进口必须先于其他任何东西:
型
如果这不是理想的,您可以将所有内容切换到
@import
:型