时间戳

首页 > 解决方案 > Rails 6：我无法安装顺风

ruby-on-rails - Rails 6：我无法安装顺风

问题描述

我正在尝试在 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）：错误：在 [ .. .../app/assets/stylesheets ] 在 ..../node_modules/postcss-import/lib/resolve-id.js:35:13 @ ./app/assets/stylesheets/application.css 2:26-171 @ ./app/javascript/packs/application.js

应用程序/javascript/packs/application.js

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

包.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
    })
  ]
}

应用程序/资产/样式表/application.css

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

应用程序.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"):

我该如何解决？

标签： ruby-on-railsnode-modulestailwind-csswebpacker

解决方案

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

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

推荐阅读