"Woops! An error occurred with the message: "SassError: Could not locate the specified target selector" while working with SCSS Modules and incorporating

Currently, I am working with Next.js and utilizing SCSS Modules. To incorporate Bootstrap into my project, I opted to install it using the command npm install bootstrap. Following this installation, I went ahead and created a new file titled common.scss within the directory /public/scss/. The contents of this file are as follows:

@import '../../node_modules/bootstrap/scss/functions';
@import '../../node_modules/bootstrap/scss/variables';
@import '../../node_modules/bootstrap/scss/mixins';
@import '../../node_modules/bootstrap/scss/grid';

My intention was to create a new CSS class like so:

@import '../../public/scss/common.scss';
.footer {
  @extend .container-fluid;
}

However, upon attempting this, an error message is displayed:

error - ./node_modules/next/dist/compiled/css-loader/cjs.js??ruleSet[1].rules[3].oneOf[3].use[1]!./node_modules/next/dist/compiled/postcss-loader/cjs.js??ruleSet[1].rules[3].oneOf[3].use[2]!./node_modules/next/dist/compiled/resolve-url-loader/index.js??ruleSet[1].rules[3].oneOf[3].use[3]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[3].oneOf[3].use[4]!./styles/components/Footer.module.scss
SassError: The target selector was not found.
Use "@extend .container-fluid !optional" to avoid this error.
  ╷
4 │   @extend .container-fluid;
  │   ^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  styles/components/Footer.module.scss 4:3  root stylesheet

I'm left wondering if there's a step I missed or if I've incorrectly implemented something. Any insights on what might be causing this issue are greatly appreciated.

csssassnext.jsbootstrap-5

Answer №1

In a recent project of mine, I encountered the same issue and managed to solve it by taking the following steps:

I included the @import for the scss file in the vite.config using the css.preprocessorOptions. Upon further investigation, I realized that importing the .scss file multiple times within a single .vue file was causing the error.

I hope this solution proves helpful for you as well.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

XSLT - Dividing table into three columns while maintaining continuity on the same page

I'm looking for a solution where I can display a long two column table in a three-column page layout. The table should seamlessly flow from one column to the next, maintaining its headers throughout. Current attempts show the entire table in just one ...

cssxsltpdf

Errors in socket.on Listeners Result in Inaccurate Progress and Index Matching for Multiple Video Uploads

Is there a way to make sure that the `socket.on('upload-progress')` listener accurately updates the upload progress for each video as multiple videos are uploaded simultaneously? Currently, it appears that the listener is updating the progress fo ...

javascriptsocketsnext.jswebsocket

CSS First Element

"When an element with a specific id has a first-child descendant that is any of the heading tags (h1, h2, h3, h4, h5, or h6), apply the following CSS styles:" I have come up with the following selector: #content:first-child h1, #content:first-child h2, ...

csscss-selectors

What could be the reason that the height: auto property is not creating a content area big enough to accommodate my content

When a user is not logged in, the header displays a logo and a login form that requires ample space. Once the user logs in, the full navigation menu appears in a smaller header size. To achieve this, adjusting the height:auto property of the "site-header" ...

htmlcssruby-on-rails

Removing the blue border around a button upon being clicked

Whenever I press my button, an unexpected event occurs. Is there a solution to avoid this issue? Thank you for your help! :) ...

htmlcssstyles

Missing Bootstrap 3 Options Menu trip away

I created a table with 4 columns using the Bootstrap 3 grid system. Instead of utilizing the col-xs-* classes, which work well on mobile devices, I opted for the col-md-* classes. This decision was based on my preference to have larger and more visible ico ...

htmlcsstwitter-bootstrapmobileoptions-menu

What are some ways to utilize .styl stylesheets instead of traditional .css files?

I really hope this isn't a silly question, but I've been searching Google and forums for 30 minutes and can't find anything. I downloaded this npm package (ag-grid) and all their documentation talks about .css files, but the package only ha ...

cssnpmsassag-grid

SVG: organizing objects based on event priority

I am struggling with layering and event handling in an SVG element. Check out the example here: https://stackblitz.com/edit/angular-ivy-rkxuic?file=src/app/app.component.ts app.component.ts import { Component, VERSION } from '@angular/core'; @ ...

cssangularsvg

Enhancing user experience by highlighting invalid input fields with a red border using client-side HTML5 validation and Bootstrap 5.2

When reviewing the Bootstrap 5.2 validation documentation, https://getbootstrap.com/docs/5.2/forms/validation/ "It has come to our attention that the client-side custom validation styles and tooltips are not accessible at this time, as they are not ...

htmlcssformsvalidation

The images on my website are not displaying properly on different devices

My attempt at creating a website for fun and testing purposes is facing issues when viewed on mobile devices. The images and specially positioned elements are not displaying correctly, extending beyond the page boundaries. I have tried adding the viewport ...

htmlcssimagepositioncross-browser

Adjust the width of your table content to perfectly fit within the designated width by utilizing the CSS property "table width:

Example of a table <table> <tr> <td>Name</td> <td>John</td> <td>Age</td> <td>25</td> <td>Job Title</td> <td>Software Engineer ...

javascriptjqueryhtmlcss

As the browser window is resized, the gap between images widens while the images themselves decrease

Hey there, I'm encountering some trouble with the image links at the top of my page. As I resize the browser or change screen resolutions in media queries using percentages, the images are resizing accordingly. However, I'm noticing that as the i ...

htmlcssimagescalespace

Why am I encountering a warning about dangerouslySetInnerHTML and receiving empty content in Next.js?

First and foremost, I am aware that nesting <p> tags is not recommended. I have developed a Next.js application wherein one of my components sets rich text HTML in the following manner: <Typography dangerouslySetInnerHTML={{ __ ...

reactjsnext.jsserver-side-rendering

Unbelievable attribute: sup causing peculiar styling in link element

We've recently come across an issue where the text-decoration of an underline in an anchor tag appears strange when there is a sup element present. The visual glitch looks like this: For reference, here's the HTML structure we are working with: ...

htmlcss

Using Node.js and Express, the CSS does not load due to route parameters

I'm currently working on a basic website project using Node.js, Express, and the EJS template engine. I've run into an issue where my external CSS files are not loading properly on routes that contain route parameters. Here's a snippet of my ...

cssnode.jsexpress

I am facing an issue where the state in Next.js React does not get updated when passing a

"use client"; import { EntityType, World } from "@/types/World"; import React, { useState } from "react"; import dynamic from "next/dynamic"; ; let RayTracingPage = dynamic(()=>import("./RayTracingCanvas&qu ...

reactjscanvasnext.jsreact-hooksfrontend

How can I apply both Css and Bootstrap styles to an element in Next.js?

I'm having trouble incorporating the Bootstrap class sticky-top into another CSS style element. I attempted to achieve the same effect without Bootstrap by adding position: sticky, top: 0 in the CSS, but it didn't work as expected. The issue aris ...

cssnext.jsbootstrap-5

Having trouble running the development environment with npm or pnpm due to permission problems

I encounter this issue when running the command without sudo, but everything works fine with elevated permissions. What could be causing this discrepancy? I've searched for similar questions on various platforms and encountered the same problem with b ...

javascriptnode.jsnpmnext.jspnpm

One way to generate div elements based on the number in an input field when a button is clicked, but ensuring it only happens once

What I am attempting to achieve is: Retrieve data from a JSON file upon button click. Display the data in separate boxes, each one different for every element of the array. For instance, if the JSON provides 3 rows of data, there should be 3 distinct box ...

javascriptjqueryhtmlcssangularjs

What could be causing the data to not load from the database when the page is loaded?

My current setup involves a button that triggers a specific function upon loading. return ( <> <LikeButtonStyle onLoad={getUserData} onClick={addInfo}> <Image width="10px" height="auto" src="/ ...

javascriptreactjsgoogle-cloud-firestorenext.js