如何在 Next 内联 sass 样式中使用变量？答案

【问题标题】：How to use variables in Next inline sass styles?如何在 Next 内联 sass 样式中使用变量？
【发布时间】：2021-06-02 11:09:19
【问题描述】：

我想知道有没有办法在内联样式中使用 SASS 变量？

export default function (): JSX.Element {
    return (
        <MainLayout title={title} robots={false}>
            <nav>
                <a href="href">Title</a>
                <a href="href">Title</a>
                <a href="href">Title</a>
                <a href="href">Title</a>
            </nav>
            <style jsx>{`
                @import '~@sass/Constants';

                nav {
                  border: 1px solid $border_color;
                  flex-direction: column;
                  display: flex;
                  padding: 10px;
                }
                
                nav a {
                  border: 1px solid $border_color;
                  margin-bottom: 10px;
                  text-align: center;
                  font-size: 1.1rem;
                  color: #777777;
                  padding: 7px;
                }
                
                nav a:hover {
                  color: #000;
                }
                
                nav a:last-child {
                  margin-bottom: 0;
                }
            `}</style>
        </MainLayout>
    );
}

如您所见，我在这里使用$border_color，它在~@sass/Constants.scss 中定义。但是 NextJS 不会用它的值替换 $border_color。

【问题讨论】：

标签： javascript reactjs typescript sass next.js

【解决方案1】：

我没用过带有内联 CSS 的 Sass，但看起来我们可以使用 @styled-jsx/plugin-sass 来编译内联样式。

// install all dependencies
npm install --save-dev sass @styled-jsx/plugin-sass

{
  "presets": [
    [
      "next/babel",
      {
        "styled-jsx": {
          "plugins": ["@styled-jsx/plugin-sass"]
        }
      }
    ]
  ]
}

【讨论】：