styled-jsx中使用sass

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

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

代码语言：javascript复制

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

module.exports = config

sass react javascript

0 人点赞