Scoped CSS not being applied within the component

Question

I have the following form component:

<template>     <div>         <form>             <input placeholder="Recipe Name">             <textarea placeholder="Recipe Description..." rows="10"></textarea>         </form>     </div> </template>  <script> export default {     name: 'AddRecipeForm' } </script>  <style scoped> form {     display: flex;     flex-direction: column; } </style> 

The <style> uses the scoped attribute.

When applied, the CSS does not get loaded in. When scoped is removed, it does get applied.

However I want to keep it local to the component.

Why is the CSS not getting applied when the scoped attribute is present?

Answer 1

It appears this was solved by doing a full-reload of the page. Hot reload should take care of scoped css.

However for future viewers, This is commonly asked when scoped CSS isnt being applied to a child component. This can be solved by using deep selectors. (e.g: Using a .selector >>> .desired-selector {})

EDIT: Since this is still getting activity, I'll bring my comment into the answer. ::v-deep also works depending on what preprocessor you're using.