Rails Tailwind 设置:模块构建失败来自 ./node_modules/postcss-loader/src/index.js:

问题描述

我按照本教程 (https://web-crunch.com/posts/how-to-install-tailwind-css-using-ruby-on-rails) 在 Rails 应用程序中设置顺风。 我使用的是 rails 6.1.3.1 和 ruby​​ 3.0.1。

尽管我遵循了所有步骤,但我的 CSS 似乎没有加载。当我检查(chrome 开发工具)我的控制台时,显示以下错误

未捕获的错误:模块构建失败(来自 ./node_modules/postcss-loader/src/index.js): 错误:ENOENT:没有那个文件或目录,打开'/app/javascript/stylesheet/tailwind.config.js'

知道可能是什么原因吗?

这是我的 postscss.config.js 文件

cv2.adaptiveThreshold(gray,255,cv2.ADAPTIVE_THRESH_MEAN_C,cv2.THRESH_BINARY,21,2)

这是我的 tailwind.config.js 文件

let environment = {
  plugins: [
    require('tailwindcss')('./app/javascript/stylesheets/tailwind.config.js'),require('postcss-import'),require('postcss-flexbugs-fixes'),require('postcss-preset-env')({
      autoprefixer: {
        flexBox: 'no-2009'
      },stage: 3
    })
  ]
};

// Add everything below!
if (process.env.RAILS_ENV === 'production') {
  environment.plugins.push(
    require('@fullhuman/postcss-purgecss')({
      content: [
        './app/**/.html.erb','./app/helpers/**/*.rb','./app/javascript/**/*.js','./app/javascript/**/*.jsx',],defaultExtractor: (content) => content.match(/[A-Za-z0-9-_:/]+/g) || []
    })
  )
}

module.exports = environment;

解决方法

我自己刚刚解决了,很高兴与大家分享: 您必须在此处将样式表更改为样式表:

  1. 在 application.js 中:导入“样式表/应用程序”
  2. 在 postcss.config.js 中:require('tailwindcss')('./app/javascript/stylesheet/tailwind.config.js'),
  3. 将文件夹名称样式表更改为样式表