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

Question

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:

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?

Try refreshing the project folder structure, restarting VSCode. — lifetimeLearner007
– lifetimeLearner007, Commented Jun 15, 2018 at 15:59
might be helpful github.com/s-panferov/awesome-typescript-loader/issues/146 — Priyesh Kumar
– Priyesh Kumar, Commented Jun 15, 2018 at 15:59
@PriyeshKumar: Thanks, when I change the error line to const styles = require('./Events.module.scss'); it works, but I get a suggestion to Convert 'require' to 'import ... very annoying — Our Man in Bananas
– Our Man in Bananas, Commented Jun 15, 2018 at 16:15
I found the solution at How to use CSS Modules with TypeScript and webpack - it's a bit of a faff or kerfuffle but it is possible — Our Man in Bananas
– Our Man in Bananas, Commented Jun 15, 2018 at 16:54

Our Man in Bananas · Accepted Answer · 2018-06-15 16:58:07Z

0

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

answered Jun 15, 2018 at 16:58

Our Man in Bananas

6,00525 gold badges104 silver badges158 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related