React中导入SCSS至react-css-themr报错：无法找到模块

Hey there! Let's work through that "module not found" error you're hitting when trying to import your SCSS file as an object for react-css-themr. I've dealt with similar quirks before, so here's what to check and fix:

The most likely culprit is that your current loader setup only injects the SCSS into the DOM (which works for plain import "style/Sample.scss"), but doesn't export the class names as a JavaScript object. To fix this, you need to enable CSS modules in your css-loader options.

Here's what your webpack rule for SCSS should look like:

module.exports = {
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          // Use MiniCssExtractPlugin.loader instead if you're extracting CSS to files
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              modules: true, // This is the **key**—enables exporting class names as an object
              exportLocalsConvention: 'camelCase' // Optional, makes class names camelCase for easier JS usage
            }
          },
          'sass-loader'
        ]
      }
    ]
  }
};

Without modules: true, the loader doesn't expose any values to import, so import * as SampleTheme will fail because there's nothing to import.

Another common gotcha: if your style folder is in your project's source directory (not node_modules), you might need a relative path. For example, if your component file is in src/components/MyComponent.js and your SCSS is in src/style/Sample.scss, you need to write:

import * as SampleTheme from '../style/Sample.scss';

If you want to use the shorthand style/Sample.scss without relative paths, set up a webpack alias to map style to your actual style folder:

resolve: {
  alias: {
    'style': path.resolve(__dirname, 'src/style')
  }
}

Once your loader is configured correctly, you can simplify your import to:

import SampleTheme from 'style/Sample.scss';

Just make sure your SCSS file has actual class selectors (not just global tag styles), like:

.sampleContainer {
  padding: 2rem;
  background: #f5f5f5;
}

.sampleButton {
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 4px;
}

If your SCSS is all global styles with no classes, the exported object will be empty—but that's probably not what you need for react-css-themr anyway.

If you're using TypeScript, you'll need to tell it how to interpret SCSS imports. Create a file named style.d.ts in your src folder:

declare module '*.scss' {
  const classes: Record<string, string>;
  export default classes;
}

This prevents TypeScript from throwing "cannot find module" errors for your SCSS files.

If you prefer using require, it should work once your webpack config is fixed. Just make sure the path is correct:

const SampleTheme = require('../style/Sample.scss');

If this still fails, double-check that your webpack rules apply to require calls (they should by default, but it's worth verifying).

Give these steps a shot—most of the time it's either the loader configuration or a path issue that's tripping things up.

内容的提问来源于stack exchange，提问作者Dheeraj Agrawal