Bug/scss import 2

[charliegdev]

Summary

This PR solves this issue about SCSS import. Resolves #38.

I was partly right: TypeScript can't find a definition file, which is why it complained. However, I was wrong to assume that I could solve it using one single global definition hack, like this:

declare module "*.scss" {
  const content: { [className: string]: string };
  export = content;
}

The hack was a bad idea anyway; I couldn't leverage TypeScript's type checking if I do that.

With some researching, I found out this article on Medium:

How to use CSS Modules with TypeScript and webpack

It contains instructions on how to generate .scss.d.ts files from .scss. With the definition files in place, the SCSS import issue is finally solved.

Tech Details

The article was written on May 11, 2017, so it was over 2 years old. Things have changed, and here is the gist:

Install typings-for-css-modules-loader

yarn add --dev typings-for-css-modules-loader

Change Webpack Config

Change the config in config/webpack.config.js like this:

Rerun

After the changes, run yarn start again, and see the typing files generated. For example, for Task.module.scss with this content:

.container {
  margin: 10px auto !important;
  width: 95%;
}

.title {
  color: #106ba3 !important;
  text-decoration: none;
}

.buttons {
  margin-top: 10px;
}

.deleteButton {
  margin-left: 10px;
}

The typing file generated, Task.module.scss.d.ts, contains content like this:

export const container: string;
export const title: string;
export const buttons: string;
export const deleteButton: string;

There you go! All the errors are gone, and I can get Intellisense now: