Rails Tailwind 设置：模块构建失败（来自 ./node_modules/postcss-loader/src/index.js）：答案

【问题标题】：Rails Tailwind Setup: Module build failed (from ./node_modules/postcss-loader/src/index.js):Rails Tailwind 设置：模块构建失败（来自 ./node_modules/postcss-loader/src/index.js）：
【发布时间】：2021-07-15 08:37:23
【问题描述】：

我正在按照本教程 (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'

知道可能是什么原因吗？

这是我的 postcss.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;

这是我的 tailwind.config.js 文件：

module.exports = {
  purge: [
  './app/**/*.html.erb',
  './app/helpers/**/*.rb',
  './app/javascript/**/*.js'
  ],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

【问题讨论】：

tailwind.config.js 是否位于 app/javascript/stylesheet/ 中？您是否有与该教程中相同的 postcss 配置？也许你错过了那个点'./app'
@razvans 你的意思是 app/javascript/stylesheets/ 对吗？我的意思是复数。关于您问题的第二部分，我在帖子中添加了上面的 postcss 文件。
您粘贴的错误有app/javascript/stylesheet，postcss 有app/javascript/stylesheets 的复数形式。那个样式表，单数，是从哪里来的？

标签： ruby-on-rails tailwind-css postcss-loader

【解决方案1】：

我自己解决了这个问题，很高兴分享：您必须在此处将样式表更改为样式表：

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

【讨论】：