Rails 6：我无法安装顺风

Posted 2023-03-06

【中文标题】Rails 6：我无法安装顺风

【英文标题】：Rails 6 : I can't install tailwind

【发布时间】：2021-06-21 14:50:02

【问题描述】：

我正在尝试在 RoR 6.1.3 和 Ruby 2.7.2 应用程序中安装 Tailwind CSS 2.0。我只是在 localhost 的输出中没有看到任何样式更新，并且除非使用 bin/webpack ，否则会出现任何错误：

./app/assets/stylesheets/application.css 中的错误 (./node_modules/css-loader/dist/cjs.js??ref--5-1!./node_modules/postcss-loader/src??ref--5-2!./app/assets/stylesheets/application .css） 模块构建失败（来自 ./node_modules/postcss-loader/src/index.js）： 错误：在 [ ...../应用程序/资产/样式表] 在 ..../node_modules/postcss-import/lib/resolve-id.js:35:13 @ ./app/assets/stylesheets/application.css 2:26-171 @ ./app/javascript/packs/application.js

app/javascript/packs/application.js

import '../utils/direct_uploads.js';
ActiveStorage.start()
require("../../assets/stylesheets/application.css")

package.json

    "@babel/core": "^7.12.1",
    "@babel/preset-env": "^7.6.0",
    "@rails/actiontext": "^6.0.0",
    "@rails/webpacker": "5.2.1",
    "@tailwindcss/postcss7-compat": "^2.0.4",
    "activestorage": "^5.2.3",
    "autoprefixer": "^9",
    "axios": "^0.19.0",
    "babel-plugin-syntax-dynamic-import": "^6.18.0",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-plugin-transform-object-rest-spread": "^6.26.0",
    "gmaps": "^0.4.24",
    "js-cookie": "^2.2.0",
    "leaflet": "^1.4.0",
    "lodash.debounce": "^4.0.8",
    "postcss": "^7",
    "postcss-cssnext": "^3.1.0",
    "stimulus": "2.0",
    "tailwindcss": "npm:@tailwindcss/postcss7-compat",
    "trix": "^1.0.0"
  ,

/postcss.config.js

module.exports = 
  plugins: [
    require('tailwindcss')('./tailwind.config.js'),
    require('autoprefixer'),
    require('postcss-import'),
    require('postcss-flexbugs-fixes'),
    require('postcss-preset-env')(
      autoprefixer: 
        flexbox: 'no-2009'
      ,
      stage: 3
    )
  ]

app/assets/stylesheets/application.css

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

application.html.erb

<%= javascript_pack_tag 'application' %>     
<%= stylesheet_link_tag 'application', media: 'all' %>     
<%= stylesheet_pack_tag 'application', media: 'all' %>

在测试页面上我得到了这些错误：

ActionController::RoutingError (No route matches [GET] "/assets/tailwindcss/base"):
ActionController::RoutingError (No route matches [GET] "/assets/tailwindcss/components"):
ActionController::RoutingError (No route matches [GET] "/assets/tailwindcss/utilities"):

我该如何解决？

【问题讨论】：

尝试导入("../../assets/stylesheets/application.css")

不，我总是有同样的错误:(

你在使用 webpacker 吗？包中的 css 需要使用 stylesheet_pack_tag 加载。

是的，在我的 application.html.erb 我有：<%= javascript_pack_tag 'application' %> <%= stylesheet_link_tag 'application', media: 'all' %> <%= stylesheet_pack_tag 'application', media: 'all' %>

只保留带有样式表包标签的那个。 stylesheet_link_tag 用于资产管道。

【参考方案1】：

像这样导入你的 postcss 插件能解决你的问题吗？

module.exports = 
  plugins: 
    tailwindcss: ,
    autoprefixer: ,
    ...
  ,