小编San*_*ota的帖子

我正在尝试使用新的 sass 模块系统的功能@use。即使在阅读文档并尝试做同样的事情之后，也无法弄清楚如何正确使用它。这是我尝试过的：

在Buttons.scss文件中我声明了这些变量

$border-color: black;\n$color: white;\n$bg: beige;\n

这样，在main.scss文件中，我导入Buttons.scss文件并尝试使用Buttons.scss文件具有的变量。

@use "buttons";\n\n$button-color: buttons.$color;\n$button-bg: buttons.$bg;\n$button-border-color: buttons.$border-color;\n\n.btn{\n    color: $button-color;\n    border: 1px solid $button-border-color;\n    background: $button-bg;\n    padding: 8px 12px;\n    display: inline-block;\n}\n

文件夹结构如下所示

css\nsass\n \xe2\x94\xa3 buttons.scss\n \xe2\x94\x97 main.scss\n

并且编译时会抛出错误Invalid CSS after \\"...-color: buttons\\。我正在关注这个博客Sass 模块简介。

我该如何@use正确使用？

我正在努力react-apexcharts并尝试将高度设置为图表的 100%，但它不接受其父母的高度，而是显示其最小高度445px。即使在将高度设置为 100% 之后，我也无法理解发生了什么，

  chart: {
      height: "100%",
  },

这是我的完整代码

import React from "react";
import ReactApexChart from "react-apexcharts";


class ApexChart extends React.Component {
    constructor(props) {
        super(props);
        this.state = {

        series: [
                {
                name: 'member',
                data: [64, 55, 21, 18, 76, 41 , 44, 14, 66, 32]
            }, {
                name: 'Partcipants',
                data: [53, 32, 42, 22, 29, 80, 16, 49, 78, 11]
            }],
            options: {
                colors: ['#519ca5', '#d5e2c0'],
                chart: {
                    height: "100%",
                },
                plotOptions: {
                    bar: { …

我正在尝试创建一个类似这样的形状。

在我的情况下，这是眉毛的形状。我用clip-path财产试过了。这样我在眉毛边界上有一个急转弯，我想避免。我认为必须有一种方法来实现这一目标。

我会很感激任何人帮助我解决我的问题。

谢谢你。

.avatar__eyebrow {
    margin: 100px;
    width: 52px;
    height: 25px;
    background: #000;
    clip-path: polygon(57% 6%, 84% 0, 100% 14%, 97% 36%, 87% 51%, 55% 57%, 28% 72%, 0 100%, 25% 39%, 42% 23%);
  }

<div class="avatar__eyebrow"></div>