ruby-on-rails 如何在tailwindcss-rails和importmaps中使用postcss-import

cbwuti44  于 12个月前  发布在  Ruby
关注(0)|答案(1)|浏览(136)

我开始了一个新的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模块.

oipij1gg

oipij1gg1#

你正在使用tailwindcss-rails gem,它使用standalone tailwind可执行文件。Postcss已经是build的一部分,你可以删除它:

require("postcss-import")

字符串
你的进口必须先于其他任何东西:

// postcss requires imports to be first
@import "./tailwind/font";

@tailwind base;
@tailwind components;
@tailwind utilities;


如果这不是理想的,您可以将所有内容切换到@import

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

@import "./tailwind/font";

相关问题