在cssbundling-rails中同时使用Tailwind和SCSS

Question

在cssbundling-rails中同时使用Tailwind和SCSS

4

在我正在从事的Rails 6项目中，我们正在考虑从webpacker升级到 cssbundling-rails 和 jsbundling-rails。我们目前使用Tailwind和SCSS，但是如果我正确理解了安装命令，似乎只能选择一个选项：

./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作为选项。仍然需要调整一些内容，但至少已经导入了主要样式表。

- gazayas

你能分享一下最终如何设置你的项目吗？你成功让Tailwind工作了吗？ - Robin G

是的，我们只使用了一个 scss 文件，这是一种特殊情况，但由于我们没有使用导入映射设置，所以我们选择了带有 postcss 选项的 cssbundling-rails，并将 Tailwind 留给包管理器。基本上，我们使用了 cssbundling-rails 的 postcss 安装程序，在 Yarn 中安装了 Tailwind，现在我们只使用 CSS 文件。 - gazayas

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Brent Greeff · Answer 1

如果我们看一下https://github.com/rails/cssbundling-rails#how-does-this-compare-to-tailwindcss-rails-and-dartsass-rails

如果您已经依赖Node来处理JavaScript，那么这个宝石就是最好的选择。但是，如果您正在使用Rails 7+中的默认导入映射设置，您可以通过使用tailwindcss-rails和dartsass-rails提供的独立版本的Tailwind CSS和Dart Sass来避免完全处理Node。

您需要cssbundling-rails吗？- 我不确定sass，但根据文档，对于dartsass来说它是不需要的，但我自己还没有使其工作。