next在style标签上使用scss语法

在开发项目的过程中碰到了这样的一个问题：页面的已经在浏览器中打开了但是样式却没有。
分析了一下原因可能是因为我引用页面样式是直接import外部scss文件，然后服务端渲染的过程中没有将样式文件渲染进去，因此想到的解决办法就是直接在页面的style标签上直接用jsx的模板语法来些样式。
直接使用以下写法是没错的但是需要进行babelrc和的配置

<style jsx>{`
    div{
        color: #333333;
        a{
            font-size: 14px
        } 
    }
`}</style>

npm install --save-dev styled-jsx-plugin-sass node-sass

在项目根目录新建.babelrc文件

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

end！！！