Rails Tailwind安装:模块构建失败(从./node_modules/postcss-loader/src/index.js)：

Question

我按照本教程(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 dev tools)我的控制台时，显示以下错误：

未捕获错误:模块构建失败(从./node_modules/postcss-loader/src/index.js)：错误: ENOENT:没有这样的文件或目录，请打开'/app/javascript/stylesheet/tailwind.config.js‘

你知道原因是什么吗？

这是我的postscss.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: [],
}

​

Answer 1

我自己解决了这个问题，很高兴与大家分享:你必须在这里将样式表改成样式表：

在样式表中更改样式表: require('tailwindcss')('./app/javascript/stylesheet/tailwind.config.js')，

1. ：require(‘tailwindcss’)(‘./app/javascript/stylesheet/tailwind.config.js’)，postcss.config.js
2. 将文件夹名称样式表更改为样式表