CODEWITHSUNDEEP
node.jsreactjssassicss
Stef1611
Stef1611

Reputation: 2387

How to get SCSS variables into react

I followed this post How to use SCSS variables into my React components or this one React and SCSS export a variable from scss to react to get scss variable in my react app but it does not work.
myvar.scss file:

$color: red;

:export {
    color: $color;
}

.myclass {
  background-color: $color;
}

App.js file:

import variables from './myvar.scss';

const App = () => {
    console.log(variables);
    return <div className="myclass">Hello</div>
}

export default App;

The div background is red, so myvar.scss is working. But variables is an empty object.

(react version : 17.0.1)

node_modules\react-scripts\config\webpack.config.js

module: {
  strictExportPresence: true,
  rules: [
    { parser: { requireEnsure: false } },
    {
      oneOf: [
...
        {
          test: sassRegex,
          exclude: sassModuleRegex,
          use: getStyleLoaders(
            {
              importLoaders: 3,
              sourceMap: isEnvProduction
                ? shouldUseSourceMap
                : isEnvDevelopment,
            },
            'sass-loader'
          ),
          sideEffects: true,
        },

Upvotes: 12

Views: 16248

Answers (2)

Martin
Martin

Reputation: 6156

UPDATE: The original answer claims that it is only supported by webpack, but this is no longer true. Many bundlers now support this via their own css processing pipeline.

Original Answer: That's a webpack/css-loader feature and only works with webpack and css-loader (https://webpack.js.org/loaders/css-loader/#separating-interoperable-css-only-and-css-module-features)

Important: the :export syntax in your SCSS/CSS files will only work for those files that are treated as a module by css-loader, because this syntax is part of a css module proposal. You can...

  • either use the default behavior of css-loader and trigger that behavior via filename: e.g. foostyle.module.scss
  • or you can configure css-loader to treat all files as modules e.g. loader: 'css-loader', options: { modules: true }

A blogpost with an example can be found here: https://til.hashrocket.com/posts/sxbrscjuqu-share-scss-variables-with-javascript (Be aware that the blogpost doesn't mention the fact that css modules must be used.)

$white-color: #fcf5ed;

:export {
  whitecolor: $white-color;
}

and

import variables from 'variables.module.scss';

console.log(variables.whitecolor)

your webpack.config.js will probably contain a chain of loaders with css-loader as last or second-to-last (process-chronologically speaking) and this should work.

module: {
    rules: [
      {
        test: /\.scss$/,
        use: [ 'style-loader', 'css-loader', 'sass-loader' ],
      },

Upvotes: 25

champion-runner
champion-runner

Reputation: 1647

I would say try using like this

  const App = () => {
  const [parameters, setParameters] = useState({
    fontFamily: ''
  });
  return (
    <div style={setParameters(fontFamily && { fontType: 'font_name' })}>
      {content}
    </div>
  );
};

Hope this works for you.

Upvotes: 0

Related Questions