CODEWITHSUNDEEP
csswebpacksasscss-loaderwebpack-style-loader
Faraz
Faraz

Reputation: 99

Imported styles from scss module are undefined

I am using CSS Module and SCSS as my styling in my app, but when I import my styles as:

import styles from './landing.module.scss'

The imported styles is undefined.

I am using:

"css-loader": "^7.1.2",
"style-loader": "^4.0.0"
"sass-loader": "^16.0.0",

Here is my webpack config:

// scss loader
config.module.rules.push({
  test: /\.scss$/,
  use: [
    'style-loader',
    {
      loader: 'css-loader',
      options: {
        modules: {
          localIdentName: '[name]__[local]--[hash:base64:5]'
        }
      }
    },
    'sass-loader'
  ]
})

// css loader
config.module.rules.push({
  test: /\.css$/,
  use: ['style-loader', 'css-loader']
})

Upvotes: 0

Views: 351

Answers (1)

Arkellys
Arkellys

Reputation: 7780

The v7.0.0 of css-loader changed the option modules.namedExport to be true by default, requiring imports to now be written from:

import styles from "./landing.module.scss";

To:

import * as styles from "./landing.module.scss";

Upvotes: 2

Related Questions