CSS медиа-запрос не работает после использования реактивной сборки - PullRequest
Новая
       34

CSS медиа-запрос не работает после использования реактивной сборки

1 голос
/ 03 августа 2020

Я разрабатываю приложение для реагирования с помощью Create-React-App. У меня есть файл CSS, содержащий следующий код: 

.gallery {
  column-count: 3;
  column-width: 33%;
}


@media (max-width: 450px) {
  .gallery {
    column-count: 1;
    column-width: 100%;
  }
}

Когда я запускаю npm start, файлы загружаются следующим образом:

Screen during development

But when I build the app using command npm run build, files are not loaded intently. Each photos loaded separately.

image

внутри <head></head>, я это тоже включил. Вот что содержит мой тег <head></head>: 

<head>
    <meta charset="utf-8"><link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta name="theme-color" content="#000000">
    <meta name="description" content="Web site created using create-react-app">
    <link rel="apple-touch-icon" href="/logo192.png">
    <link rel="manifest" href="/manifest.json">
    <title>Photo Poll</title>
    <link href="/static/css/2.27df2d27.chunk.css" rel="stylesheet">
    <link href="/static/css/main.aae8b75c.chunk.css" rel="stylesheet">       
</head>

Как я могу решить эту проблему?

1 Ответ

0 голосов
/ 03 августа 2020

У меня проблема.

Я изменил код CSS следующим образом: 

.gallery {
  -webkit-column-count: 3;
  -moz-column-count: 3;
  column-count: 3;
  -webkit-column-width: 33%;
  -moz-column-width: 33%;
  column-width: 33%;
}


@media (max-width: 450px) {
  .gallery {
    -webkit-column-count: 1;
    -moz-column-count: 1;
    column-count: 1;
    -webkit-column-width: 100%;
    -moz-column-width: 100%;
  column-width: 100%;
  }
}

Но все равно ничего не произошло. Затем я обнаружил, что внутри build/static/css есть файл с именем main.d31b7c3b.chunk.css, который содержит gallery класс, как показано ниже: 

.gallery{-webkit-column-count:3;-webkit-column-width:33%;columns:33% 3}@media (max-width:450px){.gallery{-webkit-column-count:1;-webkit-column-width:100%;columns:100% 1}}

Итак, что произошло, так или иначе npm run build исключил другие CSS свойства, которые я поместил в свой исходный код. Поэтому я изменил его вручную следующим образом: 

.gallery{-webkit-column-count: 3;-moz-column-count: 3;column-count: 3;-webkit-column-width: 33%;-moz-column-width: 33%;column-width: 33%;}@media (max-width:450px){.gallery{-webkit-column-count: 3;-moz-column-count: 3;column-count: 3;-webkit-column-width: 33%;-moz-column-width: 33%;column-width: 33%;}}

И теперь все настроено!

...