在cssbundling rails中同时使用尾风和SCSS。

Question

在我正在进行的Rails 6项目中，我们希望从webpacker升级到cssbundling-rails和jsbundling-rails。我们目前在SCSS中使用Tailwind，但是如果我正确地查看了installation命令，您似乎只能选择一个选项：

./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文件，或者到目前为止只能选择一个选项？还有其他我忽略的环境吗？

编辑：

我决定使用postcss安装cssbundling-rails，并将顺风手动安装在纱线上，而且大部分时间都在工作：./bin/rails css:install:postcss

我确信我必须使用./bin/rails css:install:tailwind，甚至不认为./bin/rails css:install:postcss是一种选择。仍然有一些东西需要调整，但至少主要的样式表正在导入。

Answer 1

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

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

你需要捆绑吗？-我不确定sass，但根据文档，它不需要的飞镖，但我自己还没有做到这一点。