在NextJS的styled jsx组件中使用mixin的问题咨询

styled-jsx 渲染的 <style jsx> 样式块默认是完全独立的作用域，你定义的 tablet mixin 不会自动注入到组件内的样式块中。你在 .module.scss 中可以正常使用，是因为这类模块样式文件走的是项目常规的 Sass 编译流程，你大概率已经在项目 Sass 配置中配置过 mixin 的自动注入，但是这套配置默认不会应用到 styled-jsx 的样式块上，才会出现找不到mixin的报错。

• 方案1：组件内显式引入mixin文件
  在需要使用mixin的组件的<style jsx>块顶部，手动引入定义了tablet的scss文件即可，示例如下：

  <style jsx lang="scss">
  /* 替换为你实际存放mixin的文件路径 */
  @import "@/styles/mixins.scss";
  
  .demo-box {
    @include tablet {
      width: 100%;
    }
  }
  </style>
  

  注意使用前要确保项目已经安装@styled-jsx/plugin-sass插件，并完成了styled-jsx的Sass预处理器支持配置。
• 方案2：配置全局自动注入mixin
  如果你不想每个组件都手动引入mixin，可以在styled-jsx的Sass插件配置中添加additionalData参数，自动将mixin文件内容注入到所有<style jsx>的Sass块中，babel配置参考如下：

  // babel.config.js 或 .babelrc
  module.exports = {
    presets: [
      ['next/babel', {
        'styled-jsx': {
          plugins: [
            ['@styled-jsx/plugin-sass', {
              sassOptions: {
                additionalData: `@import "@/styles/mixins.scss";`
              }
            }]
          ]
        }
      }]
    ]
  }
  

  配置完成后重启项目，所有组件的styled-jsx样式块都可以直接使用定义好的mixin，无需重复引入。
• 方案3：使用JS风格的mixin
  如果你不想依赖Sass预处理器，也可以把mixin封装成可导出的JS函数，直接在styled-jsx中调用：

  // 封装mixin的公共文件：src/utils/styleMixins.js
  export const tablet = (styleContent) => `
    @media (min-width: 768px) {
      ${styleContent}
    }
  `
  

  组件内使用示例：

  import { tablet } from '@/utils/styleMixins'
  
  function DemoComponent() {
    return <div className="demo-box">测试内容</div>
    <style jsx>{`
      .demo-box {
        ${tablet(`
          width: 100%;
          padding: 16px;
        `)}
      }
    `}</style>
  }
  

内容的提问来源于stack exchange，提问作者jStackOverflow