How to simply use media queris rules in components?

Hello eberybody,
i use vue js3 cli version with vue router and vuex.
i tried to setup madia queries rules in a component file but it daes not wotk at all.
Even when i check with the inspector on the navigator, the media query rule daes not appear.
as dependencies, there is node-sass and sass-loader (which were installed automaticely).
So, shall i remove the node-sass and sass-loader dependencies and how can i do it or the solution to fiw the problem is somewhere else?
thank you for your help.
please find as attached file the copy of the code

Hello @simonsays,
here I’m trying your code in the code sandbox, you can try it this way:
https://codesandbox.io/s/vigorous-snow-hv7nm5?file=/src/components/HelloWorld.vue

Hello,
thank you for your help but what did you change and in which folder or file? i did not find what changes you have operated.
Thanks again.

Hello, i have found that you do not have in your package.json this two dependencies i have:
“node-sass”: “^7.0.1”,

"sass-loader": "^13.0.2"

how can i remove them properly. i have tried to unistall these 2 deppendencies but then there is an error message in the compiler.

hello,
i have removed the sass-loader and node-sass sucessfully but it daes not change anything.
may you clone my project and have a look please?

thank you for your precious help.

Hello again,

sorry for my last messages. it works!!!
thank you.

Hello @simonsays,
I have cloned your project and change it in Header.vue file.
@media (max-width:600px) {
.grp-header{
height:100px !important;
background-color:red;

}

}

thank you very much for you help!