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