O que está acontecendo é que quando o seu main.js executa, os elementos HTML ainda não foram criados.
Uma recomendação é importar os <script>
's sempre ao final do HTML, ao invés de no começo (como você está fazendo agora). Para mais detalhes, veja Onde devo colocar um código JavaScript em um documento HTML?
Em segundo, você pode executar o seu código somente quando a página já tiver sido carregada:
$(document).ready(function() {
// Isso será executado quando o "document" estiver pronto
$('.slider-principal').slick({
dots: true,
infinite: true,
speed: 300, /*Velocidade do Slide*/
slidesToShow: 3, /*Quantidade de slides passando por vez*/
autoplay: true,
autoplaySpeed: 3000
});
});