我正在按照本教程(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: [],
}