We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
3.4.19
https://stackblitz.com/edit/vitejs-ts-scss-63q1ja?file=src%2FApp.vue
Write a DOM structure like
<div class="foo"> I am in red! <div class="bar"> I am in blue! </div> </div>
Without :global()
:global()
<style scoped lang="scss"> .foo { color: red; .bar { color: blue; } } </style>
Result: The first line is in red and the second line is in blue, it is right.
If with :global()
<style scoped lang="scss"> :global(.foo) { color: red; .bar { color: blue; } } </style>
Expect to render same as above.
.foo { color: red; } .foo .bar { color: blue; }
Result: Both two line is in blue.
This is because it was render to
.foo { color: red; } .foo { color: blue; }
instead of
System: OS: Windows 11 10.0.22631 CPU: (8) x64 Intel(R) Core(TM) i5-10210U CPU @ 1.60GHz Memory: 1.61 GB / 11.80 GB Binaries: Node: 20.6.1 - D:\Program Files\nodejs\node.EXE Yarn: 1.22.17 - ~\AppData\Roaming\npm\yarn.CMD npm: 10.2.5 - D:\Program Files\nodejs\npm.CMD pnpm: 7.26.3 - ~\AppData\Roaming\npm\pnpm.CMD Browsers: Edge: Chromium (121.0.2277.112) Internet Explorer: 11.0.22621.1
I know the correct syntax is
:global(.foo) { color: red; } :global(.foo .bar) { color: blue; } :global(.foo .bar .baz) { // something others }
However if you use with SCSS/Less/... to writing nesting rules, this will be very troublesome.
The text was updated successfully, but these errors were encountered:
Successfully merging a pull request may close this issue.
Vue version
3.4.19
Link to minimal reproduction
https://stackblitz.com/edit/vitejs-ts-scss-63q1ja?file=src%2FApp.vue
Steps to reproduce
Write a DOM structure like
Without
:global()
Result:
The first line is in red and the second line is in blue, it is right.
If with
:global()
What is expected?
Expect to render same as above.
What is actually happening?
Result:
Both two line is in blue.
This is because it was render to
instead of
System Info
Any additional comments?
I know the correct syntax is
However if you use with SCSS/Less/... to writing nesting rules, this will be very troublesome.
The text was updated successfully, but these errors were encountered: