Question

我有示例反应应用程序并使用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 Component中有App.scss文件：

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

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

App组件如下所示：

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;

在App scss中仅使用 $ _ color-base-white 等定义的颜色时，一切正常并且正常工作但是当想要使用$ 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,

为什么我不能使用功能？ Webpack插件配置如下所示：

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

Answer 1

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

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "DateCollectionViewCell", for: indexPath) as! DateCollectionViewCell
        print(self.date_listArray)
//the above print gives me empty string          

}

应该是

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

Webpack反应不明白@functions

1 个答案: