styled-jsx中使用sass

用户6256742

发布于 2022-07-06 14:22:04

8600

styled-jsx是Next.js框架自带的CSS-in-JS解决方案，我们可以在组件中使用style标签进行scoped样式的编写，但是这个插件没有内置Sass，在开发中可能会有些不方便。查询相关issues后认为使用@styled-jsx/plugin-sass相对合理一些。

使用包管理工具安装 @styled-jsx/plugin-sass （注意安装为开发依赖）
在.babelrc或者babel.config.js中使用

let config = {
    presets: [
        [
            "next/babel",
            {
                "styled-jsx": {
                    "plugins": [
                        // "styled-jsx-plugin-sass"
                        "@styled-jsx/plugin-sass"
                    ],
                    "vendorPrefixes": false
                }
            }
        ]
    ],
};

module.exports = config

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

sass