When css modules are in the scss file, refer to the css file, where the variable value of the css file is exported as undefined

[dongjinc]

example:

import React from "react";
import ReactDom from "react-dom";
import {love, yong1} from './scss/style/index.scss';
console.log(yong1); // is undefined 

function App() {
  return (
    <div className={`${love} ${yong1}`} data-theme="light">
      <div data-before="$">1w</div>
    </div>
  );
}

ReactDom.render(<App />, document.getElementById("root"));
export default App

'./scss/style/index.scss';

@import "./name.css";
.love {
  display: flex;
  background: red;
}

"./name.css"

.yong1 {
    color: red;
}

webpack.config.js

 {
        test: /\.((c|sa|sc)ss)$/i,
        use: [
          'style-loader',
          {
            loader: "css-loader",
            options: {
              importLoaders: 2,
              modules: {
                exportGlobals: true,
                localIdentName: "[path][name]__[local]--[hash:base64:5]",
                namedExport: true,
                exportLocalsConvention: "camelCaseOnly",
              },
            },
          },
          {
            loader: "postcss-loader",
            options: {
              postcssOptions: {
                plugins: [
                  [
                    "postcss-preset-env",
                    {
                      stage: 0
                    },
                  ],
                ],
              },
            }
          },
          'sass-loader',
        ],
      },

why yong1 variable is undefined??

[IgorSzymanski]

Because CSS modules are transpiled to a module with one default export that contains an object with key values, not a module with multiple named exports.

The same reason you cannot do this:

// lorem.ts

export default {
  ipsum: true,
}

import { ipsum } from './lorem'

console.log(ipsum) // undefined

Instead you have to grab the default export and pick values from the imported object.

import dolor from './lorem'

console.log(dolor.ipsum) // true

Which in your case translates to:

import React from "react";
import ReactDom from "react-dom";
import styles from './scss/style/index.scss';

function App() {
  return (
    <div className={`${styles.love} ${styles.yong1}`} data-theme="light">
      <div data-before="$">1w</div>
    </div>
  );
}

ReactDom.render(<App />, document.getElementById("root"));
export default App

[dongjinc]

Because CSS modules are transpiled to a module with one default export that contains an object with key values, not a module with multiple named exports.

I tried your method and found that styles are undefined, I configured namedExport: true of css modules on webpack, so it will be named export by default . so troubled

import React from "react";
import ReactDom from "react-dom";
import styles from './scss/style/index.scss';
console.log(styles) // undefined
function App() {
  return (
    <div className={`${styles.love} ${styles.yong1}`} data-theme="light">
      <div data-before="$">1w</div>
    </div>
  );
}

ReactDom.render(<App />, document.getElementById("root"));
export default App
`