SCSS/CSS not being generated

❓Question

I’m facing a couple issues with SCSS while upgrading from v3 to v4, and I’m looking for some help! My project uses SCSS modules, loadable components, Tailwind, and Typescript plugins for Razzle. I use the simplified const style = require('./style.scss'); method of importing styles.

1. The generated server html does not contain any style links, nor does the asset.json file have .css files shown. Specifically this means that assets.client.css is blank. (This is also the case with the with-scss project in the Razzle examples folder)
2. HTML class names in both client and server apps are output as “undefined”. For example a container div element is output as <div class="undefined undefined">...</div>
3. The <style> tags and all styles do render in the client app html, but they no longer have unique local identifier names like .style_home_containter__d38f3ls, they are just named .container

My razzle config is simple:

const SCSSPlugin = require('./packages/razzle/razzle-plugin-scss');
const LoadablePlugin = require('./packages/razzle/razzle-plugin-loadable');

module.exports = {
  plugins: [SCSSPlugin, LoadablePlugin, 'typescript'],
};

The custom scss plugin is a copy of Razzle’s scss package, with Tailwind prepended to the plugins array for postcss config.

LoadablePlugin is a copy of Razzle’s example config.

Any help is greatly appreciated.

[speedy250]

I’ve found the source of undefined problem. I was using const style = require('./style.module.scss'); to import styles, as this was how I set the app up many moons ago. I switched those imports to import style from './style.module.scss' and voila! Typescript, Tailwind, SCSS, and loadable components all playing nicely together in Razzle.

[fivethreeo]

Great if you figure it out 😀