title: How to enable SASS Modules in Webpack 4
body: <p>In my Node React web application written in TypeScript and TSX, I make use of CSS modules. Hence, when building the application I instruct Webpack to create a <code>style.css.d.ts</code> file out of a <code>style.css</code> so that I can access its classes like any other param by importing the CSS file into the TypeScript class with <code>import * as style from "./style.css";</code> and then access the params like this:</p>
  
  <pre><code>export class Foot extends React.Component&lt;FootProps, {}&gt; {
      render() {
          return &lt;div className={style.foot}&gt;© MySite&lt;/div&gt;;
      }
  }
  </code></pre>
  
  <p>What I'd like to do now is change from CSS to the SASS format SCSS and basically do the same thing. I want to have my SASS file i.e. <code>style.scss</code> and instruct Webpack to create a <code>style.scss.d.ts</code> file at build time. Though I can't figure out how to do that.</p>
  
  <p>Module rule in my <code>webpack.config.js</code>:</p>
  
  <pre><code>module: {
      rules: [
          // All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'.
          { test: /\.tsx?$/, loader: "awesome-typescript-loader" },
  
          // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
          { enforce: "pre", test: /\.js$/, loader: "source-map-loader" },
  
          { test: /\.css$/, use: [
              "style-loader",
              { loader: "typings-for-css-modules-loader", options: { modules: true, namedExport: true, camelCase: true, localIdentName: "[name]_[local]_[hash:base64]" }}
          ] },
  
          { test: /\.(scss)$/, use : [
              {
                  // Adds CSS to the DOM by injecting a `&lt;style&gt;` tag.
                  loader: "style-loader"
              },
              {
                  // Interprets `@import` and `url()` like `import/require()` and will resolve them.
                  loader: "css-loader"
              },
              {
                  // Loader for webpack to process CSS with PostCSS.
                  loader: "postcss-loader",
                  options: {
                      plugins: function () {
                          return [
                              require("autoprefixer")
                          ];
                      }
                  }
              },
              {
                  // Loads a SASS/SCSS file and compiles it to CSS.
                  loader: "sass-loader"
              }
          ]
          }
      ]
  },
  </code></pre>
  
  <p>Dependencies in my <code>package.json</code>:</p>
  
  <pre><code>  "dependencies": {
      "@types/jquery": "^3.3.22",
      "@types/react": "^16.4.18",
      "@types/react-dom": "^16.0.9",
      "bootstrap": "^4.1.3",
      "jquery": "^3.3.1",
      "popper.js": "^1.14.4",
      "react": "^16.6.0",
      "react-dom": "^16.6.0"
    },
    "devDependencies": {
      "autoprefixer": "^9.3.1",
      "awesome-typescript-loader": "^5.2.1",
      "css-loader": "^1.0.1",
      "html-webpack-plugin": "^3.2.0",
      "node-sass": "^4.10.0",
      "postcss-loader": "^3.0.0",
      "sass-loader": "^7.1.0",
      "source-map-loader": "^0.2.4",
      "style-loader": "^0.23.1",
      "typescript": "^3.1.6",
      "typings-for-css-modules-loader": "^1.7.0",
      "webpack": "^4.25.1",
      "webpack-cli": "^3.1.2",
      "webpack-dev-server": "^3.1.10"
    }
  </code></pre>
  
  <p>What must I do to change from CSS modules to SASS Modules?</p>