css Question posted in
Some basic documentation can be found here.

Rect CSS Modules in Camel Case and SCSS Style in Snake – case

I’ve seen example code where the typescript code in a react application imports CSS as modules. Then you can reference this CSS using Style.cssClassName. However, the scss/css the class name is written using snake case, ‘css-class-name’. How is this accomplished? Here is an example.

import Styles from "./Example.module.scss";

export const Example = () => {
  return (
    <>
      <Row padded={false} className={Styles.myHeaderRow}>
        <Text size={"medium"} weight={"bold"}>
          <>Sample Content</>
        </Text>
      </Row>
    </>
  );
};

Was trying to get camelCase properties, to conver to snake case CSS classes.

Tags:

2

Answers


  1. 0

    You can still apply your styling without it being written in camelCase.

    import Styles from "./Example.module.scss";

export const Example = () => {
  return (
    <>
      <Row padded={false} className={Styles["my-header-row"]}>
        <Text size={"medium"} weight={"bold"}>
          <>Sample Content</>
        </Text>
      </Row>
    </>
  );
};
    Login or Signup to reply.
  2. 0

    The configuration option you are looking for is exportLocalsConvention see documentation.
    You need to add it to your css-loader configuration (as far as I know it doesn’t matter whether you use css-loader with webpack or the corresponding css-loader plugin with another popular build tool, the configuration options are identical)

    Here is an example:

    module.exports = {
  module: {
    rules: [
      {
        test: /.css$/i,
        loader: "css-loader",
        options: {
          modules: {
            exportLocalsConvention: "camel-case",
          },
        },
      },
    ],
  },
};

    Try out whether 'camel-case' is he right one for you or whether you need one of the other values. I have to admit that the provided descriptions are not clear to me; and it was ages ago that I last had to configure the thing; I can’t recall what exactly the right value was for me.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search