使用HTML5Blank WordPress主题时SCSS嵌套样式失效求助

我是WordPress及Web开发领域的新手，正在使用HTML5Blank主题定制首个网站项目。此前SCSS可正常工作，但如今出现异常，已尝试清理浏览器缓存及WordPress后台缓存。

footer.php 代码 #

<!-- footer -->
            <footer>

                <!-- copyright -->
                <div class="copyright">
                    <p><?php echo date('Y'); ?> Copyright <?php bloginfo('name'); ?></p>
                </div>
                <div class="designer">
                    <p>Designed by <a href="/">Bubbles</a></p>
                </div>
                <!-- /copyright -->

            </footer>
            <!-- /footer -->

        </div>
        <!-- /wrapper -->

        <?php wp_footer(); ?>

        <!-- analytics -->
        <script>
        (function(f,i,r,e,s,h,l){i['GoogleAnalyticsObject']=s;f[s]=f[s]||function(){
        (f[s].q=f[s].q||[]).push(arguments)},f[s].l=1*new Date();h=i.createElement(r),
        l=i.getElementsByTagName(r)[0];h.async=1;h.src=e;l.parentNode.insertBefore(h,l)
        })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
        ga('create', 'UA-XXXXXXXX-XX', 'yourdomain.com');
        ga('send', 'pageview');
        </script>

    </body>
</html>

style.scss 代码 #

footer {
    background-color: #99DDFF;
    padding: 1rem;
    display: flex;
    justify-content: space-between;
    .copyright {
        color: red;
        p {
            color: red;
            
        }
    }
    .designer {
        p {
            a {

            }
        }
    }
}

目前footer的外层SCSS样式正常生效，但footer内的嵌套样式（如copyright下的红色文字）无法生效，尽管Prepros显示编译正常。

内容的提问来源于stack exchange，提问作者Bethany Jane