react中如何引用全局scss文件中定義的變量以及函數(shù)

我的react項(xiàng)目樣式結(jié)構(gòu)是這樣的：

1. 在項(xiàng)目的根目錄有一個(gè)全局的scss文件style.scss，里面定義了公共樣式和變量、函數(shù)
2. 然后，每個(gè)組件都有單獨(dú)的一個(gè)局部樣式

style.scss：

$color: darksalmon;

.text-center{
    text-align: center;
}

default.scss：

.outer{
  background-color: #0088cc;
  @extend .text-center;//報(bào)錯(cuò)
  .inner{
    color: $color;//報(bào)錯(cuò)
  }
}

現(xiàn)在出現(xiàn)的情況是：我在項(xiàng)目入口文件index.js引入了style.scss，然后在任意的jsx里面用className引入全局scss文件中的樣式?jīng)]問題，但如果我在局部scss文件中想用@extend去繼承全局scss文件中的樣式，或者引用全局scss文件的變量、函數(shù)均報(bào)錯(cuò)，報(bào)錯(cuò)說找不到相關(guān)樣式、變量。

請(qǐng)問該如何配置，局部scss文件可以引用全局scss文件中的變量以及函數(shù)？

另外，我配置了css模塊化，相關(guān)webpack配置如下:

 module:{
        rules:[
            {
                test: /\.scss$/,
                exclude: path.resolve(__dirname,'./style.scss'),
                use: extractTextPlugin.extract({
                    fallback: "style-loader",
                    use: [
                        {
                            loader: 'css-loader',
                            options: {
                                modules: true,
                                localIdentName: "[path][name]-[local]-[hash:base64:5]",
                                sourceMap: true,
                            }
                        },
                        {
                            loader: 'resolve-url-loader',
                        },
                        {
                            loader: 'sass-loader'
                        }
                    ]
                })
            },
            {
                test: /\.scss$/,
                include: path.resolve(__dirname,'./style.scss'),
                use: extractTextPlugin.extract({
                    fallback: "style-loader",
                    use: [
                        {
                            loader: 'css-loader',
                            options: {
                                sourceMap: true,
                            }
                        },
                        {
                            loader: 'resolve-url-loader',
                        },
                        {
                            loader: 'sass-loader'
                        }
                    ]
                })
            }
        ]
    }