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

Posted

技术标签:

【中文标题】Rails Tailwind 设置:模块构建失败(来自 ./node_modules/postcss-loader/src/index.js):【英文标题】:Rails Tailwind Setup: Module build failed (from ./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 的复数形式。那个样式表,单数,是从哪里来的? 【参考方案1】:

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

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

【讨论】:

以上是关于Rails Tailwind 设置:模块构建失败(来自 ./node_modules/postcss-loader/src/index.js):的主要内容,如果未能解决你的问题,请参考以下文章

如何将带有 PostCSS 清除的 Tailwind CSS 添加到 Rails 5?

模块构建失败:错误:spawn bin/rails ENOENT

导轨 |如何使用 Tailwind 定位无效输入字段

如何使用 Tailwind CSS 读取和解决 Rails 中的 Webpack 错误?

如何在没有 Webpacker 的情况下将 Tailwind CSS 添加到 Rails?

错误:加载 PostCSS 插件失败:令牌无效或意外(Vue.js、tailwind css)