likes
comments
collection
share

styled-jsx中使用sass

作者站长头像
站长
· 阅读数 559

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

styled-jsx中使用sass

  1. 使用包管理工具安装 @styled-jsx/plugin-sass (注意安装为开发依赖)
  2. 在.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