How to import scss in a javascript file?

Question

I am trying to import .scss file in a react component. import colors from './../../colors.scss'
The colors is undefined after I updated the project dependencies. I've used node-sass, css-loader, mini-css-extract-plugin, sass-loader, style-loader and postcss-loader in my webpack.config.js

  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: 'babel-loader',
      },
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader', 'postcss-loader'],
      },
      {
        test: /\.scss$/,
        use: [
          { loader: 'style-loader' },
          MiniCssExtractPlugin.loader,
          {
            loader: 'css-loader',
            options: {
              modules: true,
              importLoaders: 1,
            },
          },
          { loader: 'postcss-loader' },
          {
            loader: 'sass-loader',
            options: {},
          },
        ],
        exclude: [path.resolve(config.srcDir, 'styles')],
        include: [config.srcDir],
      },
      {
        test: /\.scss$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          'postcss-loader',
          {
            loader: 'sass-loader',
            options: {},
          },
        ],
        include: [path.resolve(config.srcDir, 'styles')],
      },
    ],
 }

Any idea what is missing or something that can be replaced to import scss styles as a value and access it in a react component, like

const parentClass = classNames(
    'avatar-font',
    `avatar-font--${avatarProps.size}`,
    bgColor && colors[`bg-color--${ bgColor }`]
  )

return <div className={ parentClass }></div>

Current lib versions are,

    "webpack": "^5.77.0",
    "css-loader": "^6.7.3",
    "css-minimizer-webpack-plugin": "^5.0.0",
    "postcss-loader": "^7.2.4",
    "sass-loader": "^13.2.2",
    "style-loader": "^3.3.2",

@morganney not sure. old codebase. probably to separate hthe `exclude` and `include`. any idea on why am i getting undefined? — Chandler Bing, Apr 08 '23 at 19:38
What is exported in `colors.scss`? How do you import and use it? (That is not shown in your post.) I wrote an [answer](https://stackoverflow.com/a/66120027/1280867) awhile ago that should cover how to share values from SCSS with js code. — Martin, Apr 13 '23 at 09:13

score 0 · Answer 1 · answered Apr 13 '23 at 09:27

You have two rules that cover SCSS, but the second rule configures the css-loader differently.

An Explanation: Exports and imports to share values from CSS/SCSS with the js code are a feature of css-loader. At some point in time css-loader behavior changed to only support exports from files that are treated as modules (before that exports worked in all css files). By default only files that are named *.module.(s)css are treated as modules. But with the config setting options: { modules: true } all files are treated as modules. So if your second rule (that uses the default setting for css-loader) is used to process colors.scss the exports won't work.

Add the css-loader config to your second scss rule:

{
        test: /\.scss$/,
        use: [
          MiniCssExtractPlugin.loader,
          {
            loader: 'css-loader',
            options: {
              modules: true,
              importLoaders: 1,
            },
          },
          'postcss-loader',
          {
            loader: 'sass-loader',
            options: {},
          },
        ],
        include: [path.resolve(config.srcDir, 'styles')],
      },

How to import scss in a javascript file?

1 Answers1