为了账号安全,请及时绑定邮箱和手机立即绑定

next在style标签上使用scss语法

2020.01.10 14:18 6391浏览

在开发项目的过程中碰到了这样的一个问题:页面的已经在浏览器中打开了但是样式却没有。
分析了一下原因可能是因为我引用页面样式是直接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!!!


点击查看更多内容

本文原创发布于慕课网 ,转载请注明出处,谢谢合作

0人点赞

若觉得本文不错,就分享一下吧!

评论

相关文章推荐

正在加载中
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消