• Webpack: как правильно настроить?

    Labriko
    @Labriko
    Senior Frontend Developer
    Информации не слишком много, но рискну предположить, что проблема в `publicPath`

    Уточните, что именно значит "sass не собирает"?
    1) webpack-dev-server выдаёт какую-то ошибку в терминале и прекращает работу?
    2) отрабатывает нормально, но просто молча не билдит sass?
    3) подтягивает ли он старую версию ваших sass-файлов, сбилженных до этого командой webpack?

    Если поведение подходит под пункты 2 или 3, то скорее всего, `webpack-dev-server` билдит ваш код, но не знает, как отправить его браузеру. Он хранит сбилженный код в оперативной памяти, поэтому старые копии остаются в файловой системе – вот почему браузер всегда подтягивает старые файлы

    Обычно такие проблемы возникают, если что-то не так с выходными полями `publicPath` и `path`. Попробуйте "поиграться" с ними, добавив, например `/assets`, и проверьте в браузере, какую именно статику он пытается запросить и по какому урлу

    Если не поможет, всегда можно запустить эти две команды одновременно, должно сработать:
    webpack --watch
    webpack-dev-server


    Можно запустить каждую из этих команд в отдельной вкладке терминала, или же поставить нод-модуль concurrently, а потом просто писать так:
    concurrently --raw  --kill-others "webpack --watch" "webpack-dev-server"

    --kill-others нужен для того, чтобы если один из процессов упадёт, второй упал бы тоже — в данном случае это будет удобно
    Ответ написан
  • Как унаследовать компонент в React и изменить его?

    Labriko
    @Labriko
    Senior Frontend Developer
    В Реакте не бывает случаев, когда наследование компонентов оправдано. Об этом подробно написано в официальной документации

    At Facebook, we use React in thousands of components, and we haven't found any use cases where we would recommend creating component inheritance hierarchies.


    Контент должен прокидываться через this.props.children компонента MainContainer, его рендер должен возвращать что-то вроде этого:
    <div>
      <Header />
      <Menu />
    
      <div className="content">
        {this.props.children}
      </div>
    
      <Footer />
    </div>


    Использование:
    <MainContainer>
    {/* Контент */}
    </MainContainer>
    Ответ написан
    1 комментарий
  • Суть вопроса такова.) Как сделать плавную прокрутку или "скрол" страницы?

    Labriko
    @Labriko
    Senior Frontend Developer
    Не лучше ли оставить пользователям возможность самим решить, плавная у них будет прокрутка или нет? Во всех браузерах эта функция есть. Да, есть люди, которые плавную прокрутку не любят
    Ответ написан
    2 комментария
  • Как заблокировать содержимое за блоком при его появлении?

    Labriko
    @Labriko
    Senior Frontend Developer
    Если под "за" подразумевается наслоение одного блока на другой, то у верхнего z-index должен быть больше, чем у нижнего, и у обоих блоков значение position любое, отличное от static.

    Если же вы имели в виду вылезание контента за границы блока, то тогда у объемлющего блока должно быть выставлено свойство overflow: hidden;
    Ответ написан
    Комментировать