顺风postcss嵌套不适用于嵌套的scss代码

Question

我正在尝试使用scss，但顺风没有按预期编译。

我就是这样构建application.css的

"build:css": "tailwindcss -i ./app/assets/stylesheets/application.scss -o ./app/assets/builds/application.css"

这是我的application.scss;

@import 'application_dock/colors.scss';
@import 'application_dock/pages/spots.scss';
@tailwind base;
@tailwind components;
@tailwind utilities;

body {
font-family: 'Noto Sans';
background-color: var(--bg-color);
}

Spots.scss;

.spots {
.spot {
color: blue;
.spot-content {
@apply h-32;
}
}
}

下面是构建好的css文件输出;

.spots {
.spot {
color: blue;
.spot-content{
height: 8rem;
}
}
}

我希望它是这样的;

.spots .spot {
color: blue;
}
.spots .spot .spot-content {
height: 8rem;
}

我postcss.config.js;

module.exports = {
plugins: {
'postcss-import': {},
'tailwindcss/nesting': {},
tailwindcss: {},
autoprefixer: {}
},
}

Answer 1

感觉像是一个不言而喻的配置:

$ tailwindcss -h                                                   
...
Options:
...
--postcss            Load custom PostCSS configuration

$ tailwindcss -i ./app/assets/stylesheets/application.tailwind.scss
Rebuilding...
.spots {
.spot {
color: blue;
.spot-content {
height: 8rem
}
}
}

$ tailwindcss --postcss -i ./app/assets/stylesheets/application.tailwind.scss
Rebuilding...
.spots .spot {
color: blue;
}
.spots .spot .spot-content {
height: 8rem;
}

只是更新package.json和添加--postcss选项，它也需要一个可选的路径到postcss.config.js:

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

---

另外，考虑使用位置helper/component/partial，以避免额外的css和不必要的嵌套:

<!-- app/views/spots/_spot.html.erb -->
<div class="w-32 h-32 rounded-full grid place-content-center <%= color %>">
<div class="text-white"> <%= text %> </div>
</div>

真的花了10分钟玩斑点:

<div class="grid gap-2 grid-cols-[repeat(auto-fit,8rem)]">
<% colors = %w[bg-blue-500 bg-red-500 bg-indigo-500 bg-purple-500].cycle %>
<% 36.times do |i| %>
<%= render "spots/spot", text: "i'm a spot ##{i}", color: colors.next %>
<% end %>
</div>

Answer 2

安装postcss-cli和postcss后修复问题/

"build:css": "postcss ./app/assets/stylesheets/application.scss -o ./app/assets/builds/application.css"