3

In my Next.js app, I am including a component that accepts theme colors as a parameter.

I have sass variables defined à la

$primary: #f00;

:export {
  primary: $primary;
}

which I import in pages/index.tsx like

import colors from '../styles/_variables.scss'

Then I can (theoretically) use color.primary in my component.

In the IDE, I get the ts error: Cannot find module '../styles/_variables.scss' or its corresponding type declarations.

My next.config.js file looks like this

const withSass = require('@zeit/next-sass')
const path = require("path")

module.exports = withSass({
  sassOptions: {
    includePaths: [path.join(__dirname, 'styles')],
  }
});

and if I import the scss directly with import '../styles/global.scss' The import works, but of course they aren't defined as a variable I can assess.

Martin
  • 5,714
  • 2
  • 21
  • 41
abenrob
  • 878
  • 10
  • 23

1 Answers1

1

That is just a TypeScript warning. You can declare any scss import as a module to satisfy TypeScript.

declare module '*.scss' {
  const content: {[key: string]: string};
  export default content;
}
Martin
  • 5,714
  • 2
  • 21
  • 41