Using scss variables in theme.ts

[higginbg]

Summary

I have a React + Vite + TS Storybook project. All of the theme colors for the component library are in scss variable files. I am trying to import these variables into the theme.ts, but when running Storybook I get the error No loader is configured for ".scss" files. Is it possible to configure Storybook/Vite to enable scss in the theme.ts file?

Running Storybook 7.6.12

Additional information

No response

Create a reproduction

No response

[jjoshi-space]

Have you tried installing preset-scss?
Check out below discussion wrt the plugins used
#28713

[higginbg]

I have not tried it. It looks like that is for webpack though, but my project is using vite.

I ended up writing this script to turn the scss variables into a js object. A little bit of a workaround but it works.

// Creates a js object from scss variables
// To get theme from a single source

import * as sass from 'sass';
import * as fs from 'fs';
import * as path from 'path';
import postcss from 'postcss';
import { fileURLToPath } from 'url';

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

const scssFilePath = path.resolve(__dirname, './variables.scss');

type VariableMap = Record<string, string>;

function extractVariablesFromScss(scssFile: string): VariableMap {
  const result = sass.compile(scssFile);
  const css = result.css.toString();

  const root = postcss.parse(css);

  const variables: VariableMap = {};

  root.walkDecls((decl) => {
    if (decl.prop.startsWith('--')) {
      variables[decl.prop.slice(2)] = decl.value;
    }
  });

  return variables;
}

function writeVariablesToJsFile(
  variables: VariableMap,
  outputFilePath: string
) {
  const content = `export const variables = ${JSON.stringify(variables, null, 2)};`;
  fs.writeFileSync(outputFilePath, content, 'utf8');
}

try {
  const variables = extractVariablesFromScss(scssFilePath);
  const outputFilePath = path.resolve(__dirname, './variables.ts');
  writeVariablesToJsFile(variables, outputFilePath);
  console.log('SCSS variables have been exported to JavaScript file.');
} catch (err) {
  console.error('Error extracting SCSS variables:', err);
}

And the variables.scss file:

@use "../../theme/colors";

:root {
  --primary: #{colors.$primary};
  --secondary: #{colors.$secondary};

  // etc
}