使用 Styled JSX 的自定义媒体查询 - Next v. 9.0.6

Question

谁能指出一个成功使用https://github.com/postcss/postcss-custom-media 的示例next.js.config 或postcss.js.config？我正在使用 next v. 9.0.6 并且还有 next-css 1.0.1。

我正在尝试做这样的事情：

// postcss.js.config
module.exports = {
  plugins: {
    'postcss-custom-media': {
      customMedia: {
        '--breakpoint-not-small' : 'screen and (min-width: 30em)',
        '--breakpoint-medium ': 'screen and (min-width: 30em) and (max-width: 60em)',
        '--breakpoint-large ': 'screen and (min-width: 60em)',
      }
    }
  }
}

应用编译正常，但是自定义媒体查询不生效。

我也尝试将它直接放在全局范围的 jsx 标记中，没有错误，但它根本没有生效。有什么想法吗？

感谢您的帮助！

Answer 1

我就是这样做的。

const withCSS = require('@zeit/next-css');
const atImport = require('postcss-import');
const postCssPresetEnv = require('postcss-preset-env');
const postCssCustomProperties = require('postcss-custom-properties');
const postcssCustomMedia = require('postcss-custom-media');
const postCssColorMod = require('postcss-color-mod-function');

将此字段添加到 next.config.js：

postcssLoaderOptions: {
    ident: 'postcss',
    sourceMap: true,
    plugins: () => [
      atImport,
      postCssCustomProperties({
        preserve: false,
        importFrom: 'src/styles/variables.js',
      }),
      postcssCustomMedia({
        preserve: false,
        importFrom: 'src/styles/breakpoints.js',
      }),
      postCssPresetEnv({
        stage: 0,
        browserslist: 'last 2 versions',
      }),
      postCssColorMod,
    ],
  },

并在 next.config.js 中使用：

module.exports = withCSS({
...
}):

无论如何你应该有 postcss.config.js（不是postcss.js.config，据我所知），让 nextjs 加载 postcss 加载器，我的是空的（不确定它是否正确）

module.exports = {}

Answer 2

:)

看看下面的配置。注意module.exports = (ctx) => ({... 这是我编译它的诀窍。我尝试了所有方法，包括通过.babelrc 发布 css 加载程序，但没有任何效果。

postcss.config.js

module.exports = (ctx) => ({
  plugins: [
    require('postcss-import'),
    require('postcss-nested'),
    require('postcss-easing-gradients'),
    require('postcss-selector-not'),
    require('postcss-flexbugs-fixes'),
    require('postcss-custom-media')({
      customMedia: {
        '--breakpoint-not-small' : 'screen and (min-width: 30em)',
        '--breakpoint-medium ': 'screen and (min-width: 30em) and (max-width: 60em)',
        '--breakpoint-large ': 'screen and (min-width: 60em)',
      }
    }),
    require('postcss-preset-env')({ stage: 1 }),
    require('tailwindcss'),
    require('autoprefixer')
  ]
})

next.config.js

/**
 * next.config.js
 * Next JS configuration file
 * The following helps to use multiple plugins
 * @see https://github.com/JerryCauser/next-compose
 */
/**
* Using Fonts
* @see https://github.com/rohanray/next-fonts
* Environment variables
* @see https://stackoverflow.com/questions/50416138/nextjs-set-dynamic-environment-variables-at-the-start-of-the-application
*/

/**
 * Exclude tests and stories from being compiled.
 * @see https://github.com/zeit/next.js/issues/1914
 * via
 * excludeFile: ... (see below)
 */
const withPlugins = require('next-compose-plugins')
const withImages = require('next-images')
const withFonts = require('next-fonts')
const optimizedImages = require('next-optimized-images')
const withCSS = require('@zeit/next-css')

console.log('NextJs Config Environment:', process.env.NODE_ENV)

const nextConfig = {
  distDir: '_next',
  // serverRuntimeConfig: { // Will only be available on the server side
  //   wordpressApiUrl: process.env.WORDPRESS_API_URL
  // },
  // publicRuntimeConfig: { // Will be available on both server and client
  //   staticFolder: '/public',
  //   port: 8081 // The server port
  // },
  // pageExtensions: ['jsx', 'js'],
  // Removes the [BABEL] Note: The code generator has deoptimised the styling of
  compact: true,
  webpack: (config, options) => {
    const { isServer, buildId, dev } = options
    // Fixes npm packages that depend on `fs` module
    // config.node = {
    //   fs: 'empty',
    // };

    if (dev) {
      // Skip tests and stories from being compiled during development
      // Note: This speeds up compilation.
      config.module.rules.push(
        {
          test: /\.(spec,test,stories)\.(js|jsx)$/,
          loader: 'ignore-loader'
        },
      )
    }
    return config
  },
  // Client-side environment variables
  env: {
    ...
  }
}

module.exports = withPlugins([
  [withImages, {}],
  [optimizedImages, {}],
  [withFonts, {}],
  [withCSS, {}],
], nextConfig)

.babelrc

// .babelrc
// @see https://nextjs.org/docs/advanced-features/customizing-babel-config for more.
{
  "ignore": [ "node_modules/**" ],
  "presets": [
    [
      "next/babel"
    ]
  ],
  "plugins": [
    "inline-react-svg"
  ]
}