Пользовательские медиа запросы с Styled JSX - Next v. 9.0.6 - PullRequest
Новая
       50

Пользовательские медиа запросы с Styled JSX - Next v. 9.0.6

0 голосов
/ 04 октября 2019

Может кто-нибудь указать мне на пример next.js.config или postcss.js.config, который успешно использует https://github.com/postcss/postcss-custom-media? Я использую 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, без ошибок, но также он не действует вообще. Есть идеи?

Спасибо за помощь!

1 Ответ

0 голосов
/ 08 ноября 2019

Вот как я это сделал. 

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 = {}
...