How to use variables in Next inline sass styles?

Question

I'd like to know is there a way to use SASS variables in inline styles?

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>
    );
}

As you see, I use $border_color here, which is defined in ~@sass/Constants.scss . But NextJS do not replace $border_color with it's value.

Answer 1

I have not used Sass with inline CSS, but it looks like we can use @styled-jsx/plugin-sass to compile inline style.

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

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