Bogus "target selector not found" error with meta.load-css()
See original GitHub issueCurrently this produces an error:
.animate--fade-in {
opacity: 0;
animation: fade-in 0.1s forwards cubic-bezier(0.19, 1, 0.22, 1);
}
@mixin animate($type: 'fade-in', $time: 1s, $delay: 0s) {
@if $type == 'fade-in' {
@extend .animate--fade-in;
animation-duration: $time;
animation-delay: $delay;
}
Error: The target selector was not found.
Use "@extend .animate--fade-in !optional" to avoid this error.
╷
276 │ @extend .animate--fade-in;
│ ^^^^^^^^^^^^^^^^^^^^^^^^^
╵
Bumped into this after upgrading from Ruby Sass to current version "sass": "1.52.1"
Issue Analytics
- State:
- Created a year ago
- Comments:8 (5 by maintainers)
Top Results From Across the Web
use - The target selector was not found. · Issue #1295 - GitHub
Can anyone explain why this is happening?
Read more >The target selector was not found" when using SCSS Modules ...
I @import the scss file in vite.config by css.preprocessorOptions, I found that when I re- @import in single .vue file, the error happens....
Read more >MiniCssExtractPlugin - webpack
Allows to setup custom query selector. A new <link> element will be inserted after the found item. webpack.config.js new MiniCssExtractPlugin({ insert: ...
Read more >Getting Started - BootstrapVue
Responsive meta tag. Bootstrap is optimized for mobile devices first and then scales up components as necessary using CSS media queries.
Read more >sass:meta
It shouldn't be a CSS url() ! SCSS; Sass; CSS. SCSS Syntax. // dark-theme/_code ...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
Fixed by https://github.com/sass/dart-sass/pull/1824
I haven’t fully excavated this yet, but I think the issue here is that we’re sharing the same instance of
_midstream.scss
between the primary set of modules and the duplicated set we create formeta.load-css()
because it doesn’t contain any concrete styles, but it’s participating in@extend
resolution because it does depend on concrete styles. Somehow we’re picking up the@extend
from theload-css
module set in the primary module set as though it were defined in_midstream.scss
, and that’s what’s failing.I’ve confirmed that if I add
.target.upstream {...}
to_upstream.scss
, the error disappears and both.target.upstream {...}
blocks are extended when in fact only the one loaded fromextender.scss
should be.