question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Bogus "target selector not found" error with meta.load-css()

See original GitHub issue

Currently 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:closed
  • Created a year ago
  • Comments:8 (5 by maintainers)

github_iconTop GitHub Comments

1reaction
nex3commented, Nov 4, 2022
1reaction
nex3commented, Nov 2, 2022

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 for meta.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 the load-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 from extender.scss should be.

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found