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 CSS 读取和解决 Rails 中的 Webpack 错误?