Unable to locate CSS/SCSS Code module in VSCode when using a relative path

Question

Unable to locate CSS/SCSS Code module in VSCode when using a relative path

I am currently developing a SharePoint Framework web-part in VS Code.

Despite my efforts, I am unable to locate my scss styles file, even though it is stored in the same directory - please refer to the image provided below:

https://i.sstatic.net/LanF7.png

I have meticulously examined the styles file named Events.module.scss in case there was an issue preventing it from being imported, but no problems were found...

I have attempted restarting VS Code, moving files around, and changing the name of the scss file...but to no avail.

What could be missing here, and how can this issue be resolved?

css angular typescript visual-studio-code

Answer 1

Answer №1

I discovered the solution over at How to implement CSS Modules with TypeScript and webpack

One option is to circumvent the import by using

const s = require('./Button.css');

Alternatively, you can install Typings for CSS Modules like this:

npm install --save-dev typings-for-css-modules-loader

then include the new rule in webpack.config:

module: {
  rules: [
    {
      test: /\.css$/,
      include: path.join(__dirname, 'src/components'),
      use: [
        'style-loader',
        {
          loader: 'typings-for-css-modules-loader',
          options: {
            modules: true,
            namedExport: true
          }
        }
      ]
    }
  ]
}

It may be a bit complicated or confusing, but it can be done

Answer 2

I discovered the solution over at How to implement CSS Modules with TypeScript and webpack

One option is to circumvent the import by using

const s = require('./Button.css');

Alternatively, you can install Typings for CSS Modules like this:

npm install --save-dev typings-for-css-modules-loader

then include the new rule in webpack.config:

module: {
  rules: [
    {
      test: /\.css$/,
      include: path.join(__dirname, 'src/components'),
      use: [
        'style-loader',
        {
          loader: 'typings-for-css-modules-loader',
          options: {
            modules: true,
            namedExport: true
          }
        }
      ]
    }
  ]
}

It may be a bit complicated or confusing, but it can be done

Unable to locate CSS/SCSS Code module in VSCode when using a relative path

Answer №1

Similar questions

Encapsulate the module function and modify its output

Issue with file upload controller in .net core 2.2 and Angular 7: IFormFile always returns null

Embarking on the GSAP journey

Nav bar width remains stagnant despite varying content lengths

Accordion symbol for adding or subtracting

Issue in NativeScript: The scrollable height is consistently shown as 0

System access denied to create directory node_modules on MacOS Monterey

Displaying an additional section using hover effects in Bootstrap

Angular animations do not seem to be functioning properly with ng-show when changing the class using ng-class

Enclose an image with a <div> element while maintaining the <div> height at

Leveraging NGRX in an Angular Library

Struggling to center with margin 0 auto

The duplication and multiplication of margin-left is occurring

Issue with MUI data grid not resizing properly within a grid container: The dimensions of the MUI data grid are not adjusting as anticipated

What is the best way to split an image in half without displaying it and avoiding any horizontal scrolling on the page?

Can we employ the spread operator in generic parameters?

What is the best way to manage multiple tsconfig files for an Angular application?

Display streaming data continuously within an HTML page using Angular 16

What is the proper way to store the output in a variable? Angular and XLSX

Experience the sleek transparency when black hues grace the interface on iOS 14 and above