登录/注册

styled-jsx中使用sass

用户头像管理员112阅读

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

前端,React

  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
Preview
登录后评论