Webpack react sass not understanding #functions - reactjs

Question

I have sample react app and using scss. I have 2 scss file:
Colour palette:
$_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);
}
And then I have App.scss file inside React Component:
#import '../../assets/styles/colour_semantics';
.app-header {
color: $palettes(white, mid-light);
}
And App component looks like this:
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;
When using only defined colours like $_color-base-white in App scss everything is ok and working but when want to use $palettes:
index.js??ref--5-1!./node_modules/sass-loader/lib/loader.js??ref--5-2!./src/containers/App/App.scss:1 Uncaught Error: Module build failed:
$palettes: (
^
(white: (x-light: white,
Why can I not use functions? Webpack plugin config looks like this:
{
test: /\.(sass|scss)$/,
use: [{
loader: "style-loader"
}, {
loader: "css-loader", options: {
sourceMap: true,
importLoaders: 2
},
}, {
loader: "sass-loader" , options: {
sourceMap: true
},
}]
},

Answer 1

You are calling the list and not the function.
.app-header {
color: $palettes(white, mid-light);
}
Should be
.app-header {
color: palette(white, mid-light);
}