Generate types w/o using CSS modules?

[JasonLawrenceDuncan]

This might be a really dumb question, but is there any way to auto-generate the scss.d.ts files WITHOUT having to turn on CSS modules?

I would like to be able to import a given SCSS file into my React component to use the styles. With the modules: true option, the scss.d.ts file gets generated and my component is happy, but all my site styling totally breaks because it was not set up to use CSS modules.

If I do one run through webpack with modules: true (so that the type files are generated), then do a second run through with modules: false, everybody's happy, my global styling works and my React component can find its type files. However, if I were to change the source SCSS or delete the type file, I'd have to repeat these extra steps to get a new type file, which is annoying.

Let me know if you need more information.

[CMBell715]

You can set up a separate test for only specific files you want to import as modules

     \\ ... rest of config

      /** only files post-fixed with `*.module.scss` will get typings and modules  */
      {
        test: /\.module\.s?css$/,
        loader: [
          'style-loader',
          {
            loader: 'typings-for-css-modules-loader',
            options: {
              modules: true,
              sass: true,
              namedExport: true,
              camelCase: true,
              localIdentName: '[name]__[local]___[hash:base64:5]',
              sourceMap: true,
            },
          },
          {
            loader: 'sass-loader',
            options: {
              sourceMap: true,
            },
          },
        ],
      },

      /** global scss doesn't. You can use whichever configuration you were using before, just make sure to `exclude` the files from the previous test so as not to run through them again */
      {
        test: /\.s?css$/,
        /** make sure you include this guy */
        exclude: /\.module.(s?css)$/,
        loader: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              sourceMap: true,
            },
          },
          {
            loader: 'sass-loader',
            options: {
              sourceMap: true,
            },
          },
        ],
      },

     \\ ... rest of config