Reactjs 网页包不理解@functions

我有示例react应用程序和使用scss。我有2个scss文件： 调色板：

$_color-base-white: #FFF;
$_color-base-black: #000;
$_color-base-grey: #DCDCDC;
$_color-base-charcoal: #404040;
$_color-base-turquoise: #50E3C2;
$_color-base-red: #e3454f;
$_color-base-blue: #006DEF;
$_color-base-green: #009d2f;

$palettes: (
    white: (
        x-light: lighten($_color-base-white, 60%),
        light: lighten($_color-base-white, 40%),
        mid-light: lighten($_color-base-white, 10%),
        base: $_color-base-white,
        mid-dark: darken($_color-base-white, 10%),
        dark: darken($_color-base-white, 40%),
        x-dark: darken($_color-base-white, 60%)
    )
);

@function palette($palette, $tone: 'base') {
    @return map-get(map-get($palettes, $palette), $tone);
}

然后我在React组件中有App.scss文件：

@import '../../assets/styles/colour_semantics';

.app-header {
  color: $palettes(white, mid-light);
}

应用程序组件如下所示：

import React, { Component } from 'react';
import './App.scss';

class App extends Component {
  render() {
    return (
      <div className="app">
        <h1 class="app-header">Hello World</h1>
      </div>
    );
  }
}

export default App;

{
        test: /\.(sass|scss)$/,
        use: [{
            loader: "style-loader" 
        }, {
            loader: "css-loader", options: {
            sourceMap: true,
            importLoaders: 2
          },
        }, {
            loader: "sass-loader" , options: {
              sourceMap: true
          },
        }]
      },

为什么我不能使用函数Webpack插件config如下所示：

import React, { Component } from 'react';
import './App.scss';

class App extends Component {
  render() {
    return (
      <div className="app">
        <h1 class="app-header">Hello World</h1>
      </div>
    );
  }
}

export default App;

{
        test: /\.(sass|scss)$/,
        use: [{
            loader: "style-loader" 
        }, {
            loader: "css-loader", options: {
            sourceMap: true,
            importLoaders: 2
          },
        }, {
            loader: "sass-loader" , options: {
              sourceMap: true
          },
        }]
      },

---

您正在调用列表，而不是函数

.app-header {
  color: $palettes(white, mid-light);
}

应该是

.app-header {
  color: palette(white, mid-light);
}