CODEWITHSUNDEEP
cssangulartypescriptvisual-studio-code
Our Man in Bananas
Our Man in Bananas

Reputation: 5979

CSS/SCSS Code module not found in VSCode using relative path

I'm writing a SharePoint Framework web-part in VS Code.

Unfortunately my scss styles file cannot be found, even though it's in the same path - please see the image below:

enter image description here

I also checked the styles file Events.module.scss in case an error in their was preventing it being imported, but there are no issues with that file...

I have tried restarting VS Code...tried moving the files around, tried renaming the scss file...

So what is missing here, and how can I resolve it?

Upvotes: 6

Views: 3777

Answers (1)

Our Man in Bananas
Our Man in Bananas

Reputation: 5979

I found the solution at How to use CSS Modules with TypeScript and webpack

Either we can bypass the import by using const s = require('./Button.css');

or, install Typings for CSS Modules like so:

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

then add the new rule to 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's a bit of a faff or kerfuffle but it is possible

Upvotes: 1

Related Questions