i got a empty object when import a sass file.

hi, brother. i saw many tutorial import css file like this:

import React, { PropTypes, Component } from 'react'
import styles from './index.css'

console.log(styles)
export default class PageLoading extends Component {
  render() {
    return (
      <div className={styles.loading}>Hello page loading!</div>
    )
  }
}

please attention the className is expression. but when i import sass by same way. i found i can’t use the styles.loading in className

import React, { PropTypes, Component } from 'react'
import styles from './index.scss'

console.log(styles)
// styles is a empty object
export default class PageLoading extends Component {
  render() {
    return (
      <div className={styles.loading}>Hello page loading!</div>
    )
  }
}

how can i resolve it. thank u.!

[silvenon]

This is not a sass-loader issue, you just forgot to turn on CSS Modules in the css-loader.

[Drumstix42]

For anyone else finding this topic years later, the CSS Modules config is important as noted in the previous comment.

The simple fix, without really needing to adjust the default modules config for css-loader is to put .module. into your file name. E.g.: _exports.module.scss

This allows the CSS Loader to automagically determine this is a module, and now your :export variables will be picked up correctly in JS import.