CSS modules rendering blank; classes are not generated?

[gfcf14]

I am trying to implement css modules for my project, for which I am using .scss files. I've looked at this issue #625 and added the code at the end to my razzle.config.css so it would look like this:

const path = require("path");

module.exports = {
  // for custom webpack config
  modify(config, { target, dev }, webpack) {
    const appConfig = config;

    for (const rule of config.module.rules) {
      if (rule.test && rule.test.toString() === "/\\.module\\.css$/") {
          const scss = { ...rule };

          scss.test = /\.scss$/;
          scss.include = path.join(__dirname, "src");
          scss.use.push({ loader: "sass-loader" });

          appConfig.module.rules.push(scss);

          break;
      }
  }

    return appConfig;
  },
  plugins: [
    {
      name: 'scss',
      options: {
        postcss: {
          dev: {
            sourceMap: false,
          },
        },
      },
    }
  ],
};

And when I ran, I got this error: expected 1 selector or at-rule, was "var content = requi". Thinking I was repeating rules, I thought of outputting them like this:

for (const rule of appConfig.module.rules) {
      console.log(rule);
    }

And indeed there already is a /\.(sa|sc)ss$/ rule that would conflict with the one recently added. So I removed the code (the whole for loop) and converted my component to this:

import React from 'react';
import { Flex, Image } from 'rebass';
import vortexImage from '../../images/vortex.svg';
import styles from './not-found.module.scss';

export function NotFound() {
  return (
    <Flex as="section" className={styles.component}>
      <Flex as="section" className={styles.textSection}>
        <div className={styles.starsSM} />
        <div className={styles.starsMD} />
        <div className={styles.starsLG} />
        <div className={styles.centerText}>
          404 page not found
        </div>
        <div className={styles.bottomText}>
          Don't worry! Click here to go back to the homepage
        </div>
      </Flex>
      <section className={styles.rotatedSection}>
        <Image
          src={vortexImage}
          className={styles.vortex}
          alt="vortex"
        />
      </section>
    </Flex>
  );
}

and renamed my classes in not-found.module.scss to camel case. Still, as I run the project the divs and sections appear blank (no class property). Only Image and Flex elements have classes, but because rebass generates them. Is it that I am missing a property in the rule? Does localIdentName need to be specified or does razzle have a default for .module.scss files? Please let me know if I should add anything to my code

[lhansford]

I ran into a similar issue just recently. I can't remember the exact cause, but I believe it may have been that the 'scss' plugin would interfere with the .module.scss files. Our solution was to exlude .module.scss from the 'scss' plugin like so:

modify(config, { target, dev }, webpack) {
    for (const rule of config.module.rules) {
        // Add loader for .module.scss files
        if (rule.test && rule.test.toString() === "/\\.module\\.css$/") {
            const scss = { ...rule };
            scss.test = /\.module\.scss$/;
            scss.include = path.join(__dirname, "src");
            scss.use.push({ loader: "sass-loader" });
            config.module.rules.push(scss);
        }
        // Exlude .module.scss from 'sass' rule
        if (rule.test && rule.test.toString() === "/\\.(sa|sc)ss$/") {
          rule.exclude = [/\.module\.scss$/];
        }
    }
    return config;
  }

[nimaa77]

razzle-plugin-scss have a exclude rule .module.scss in it's the latest version.

so I think this is resolved and I'm going to close this one.