将 Tailwind 和 SCSS 与 cssbundling-rails 一起使用答案

【问题标题】：Use both Tailwind and SCSS with cssbundling-rails将 Tailwind 和 SCSS 与 cssbundling-rails 一起使用
【发布时间】：2022-01-16 18:53:45
【问题描述】：

在我正在进行的 Rails 6 项目中，我们正在寻求从 webpacker 升级到 cssbundling-rails 和 jsbundling-rails。我们目前使用带有 SCSS 的 Tailwind，但如果我正确查看安装命令，您似乎只能选择一个选项：

./bin/rails css:install:[tailwind|bootstrap|bulma|postcss|sass]

我使用 Tailwind 安装并更改了生成的应用程序样式表：

// Old
application.tailwind.css
// New
application.tailwind.scss

我还在package.json 中添加了构建脚本，使用.scss 而不是.css：

"scripts": {
  "build:css": "tailwindcss --postcss -i ./app/assets/stylesheets/application.tailwind.scss -o ./app/assets/builds/application.css",
  …
}

在postcss.config.js:

module.exports = {
  parser: 'postcss-scss',
  syntax: 'postcss-scss',
  plugins: {
    …
  }
}

这是我得到的错误：

18:26:22 css.1  | Error: Unexpected '/'. Escaping special characters with \ may help.
18:26:22 css.1  |     at Root._error (/node_modules/postcss-selector-parser/dist/parser.js:174:16)
18:26:22 css.1  |     at Root.error (/node_modules/postcss-selector-parser/dist/selectors/root.js:43:19)
18:26:22 css.1  |     at Parser.error (/node_modules/postcss-selector-parser/dist/parser.js:740:21)
18:26:22 css.1  |     at Parser.unexpected (/node_modules/postcss-selector-parser/dist/parser.js:758:17)
18:26:22 css.1  |     at Parser.combinator (/node_modules/postcss-selector-parser/dist/parser.js:656:12)
18:26:22 css.1  |     at Parser.parse (/node_modules/postcss-selector-parser/dist/parser.js:1097:14)
18:26:22 css.1  |     at Parser.loop (/node_modules/postcss-selector-parser/dist/parser.js:1039:12)
18:26:22 css.1  |     at new Parser (/node_modules/postcss-selector-parser/dist/parser.js:164:10)
18:26:22 css.1  |     at Processor._root (/node_modules/postcss-selector-parser/dist/processor.js:53:18)
18:26:22 css.1  |     at Processor._runSync (/node_modules/postcss-selector-parser/dist/processor.js:100:21)

新的cssbundling-rails gem 是否可以同时使用 Tailwind 和 SCSS 文件，还是我们现在只能选择一个选项？还有其他一些我忽略的设置吗？

编辑：

我决定使用 cssbundling-rails 的 postcss 安装，并使用 yarn 手动安装 tailwind，它在大多数情况下都可以正常工作： ./bin/rails css:install:postcss

我确信我必须使用./bin/rails css:install:tailwind，甚至没有考虑将./bin/rails css:install:postcss 作为一个选项。还有一些需要调整的地方，但至少主要的样式表正在被导入。

【问题讨论】：

标签： css ruby-on-rails webpack sass tailwind-css

【解决方案1】：

如果我正在阅读这篇文章，Tailwind 没有正确安装。

你还做了什么？

HTML 的正则表达式在哪里？

您的要求在哪里？

您是否调整了应用程序布局中的 pack_tag？

【讨论】：