Webpack 使用样式化JSX的自定义媒体查询-Next v。9.0.6

有人能给我举一个成功使用next.js.config或postss.js.config的例子吗？我用的是下一个v。9.0.6，还有下一个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标记中，没有出现错误，但它根本没有起作用。有什么想法吗

谢谢你的帮助

我就是这样做的

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({
...
}):

无论如何，你应该有postsss.config.js而不是postsss.js.config，据我所知，为了让nextjs加载postsss-loader，我的是空的，不确定它是否正确

module.exports = {}

:

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

postss.config.js

next.config.js

B.法律改革委员会

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