How to import global less mixin so it can be used in any components?

Question

I was using webpack extract-text-plugin with the following code, and got the error: ModuleBuildError: Module build failed: .bg is undefined. Is there a way to make such way of importing work?

my index.jsx file is as below:

import 'style-theme-module/less/index.less'
import './style.less'

my style-theme-module/less/index.less is:

.bg{
   color: white
}

my style.less is:

.app{
   .bg()
}