嵌套的 SCSS 样式在生产中不起作用答案

【问题标题】：Nested SCSS styles not working in production嵌套的 SCSS 样式在生产中不起作用
【发布时间】：2020-12-02 00:58:57
【问题描述】：

我正在使用带有 webpacker 的 Rails。在本地一切正常，但一旦我推到heroku，它就会中断。

我删除了除我自己的 scss 之外的所有内容，并注意到有些样式没有在生产中加载。

例如在同一个文件中，.fabric-container 不会出现，但#renderCanvas 会：

.fabric-container {
    display: inline-block;
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 10%;
  overflow: hidden;


  &:after {
    content: '';
    display: block;
    margin-top: 100%;
  }
}

#renderCanvas {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  opacity: .6;
}

这是去掉其他所有内容的 CSS 截图，底部是 prod 页面的 CSS。完全缺少.canvas-container 在本地工作正常！

【问题讨论】：

你提到样式是嵌套的，那些看起来不嵌套的，是不是嵌套的？
伪元素 &:after 嵌套在 .fabric-container 中，所以我觉得奇怪的是，那是在生产中没有通过的元素。
哦，但是其他.fabric-container 样式都应用了吗？

标签： ruby-on-rails heroku webpack webpacker

【解决方案1】：

此调试会话中有许多红鲱鱼......但我知道有些东西正在改变输出 css。

原来 Rails Jumpstart Pro 包括顺风和净化。

我们默认包含 PurgeCSS 以自动删除未使用的部署到生产环境时的 CSS。这大大减小了 TailwindCSS 在生产中提供更快的体验生产。

它位于postcss.config.js，这就是为什么我在config/environments 等中没有看到它。

因此，如果您遇到这种情况，请查看 postcss.config.js，然后在此处添加您的文件或将其完全删除！

【讨论】：