Сергей delphinpro

как можно исправить эту проблему??

@mixin example() {
  &::hover { color: red; } // Так можно
  // но миксин можно использовать только внутри родительского селектора
}

&::hover { color: red; } // Так нельзя, нет родителя

.block {
  &::hover { color: red; } // Так можно, есть родительский селектор (.block)
}

@include example(); // Так нельзя, внутри обращение к родителю, а его нет

.block {
  @include example(); // Так можно
}

.block {
  background-image: url('image.jpg');
}
@media (max-width: 700px) {
  .block {
    background-image: url('image-small.jpg');
  }
}

@mixin verticalAlign($screen) {
  @each $direction, $alignment in $alignments {
    &.v-align-#{$screen}-#{$direction} {
      align-items: $alignment;
    }
  }
}

@mixin media($minWidth) {
  @media (min-width: $minWidth) {
    @content;
  }
}

@include media(768px) {
  @include verticalAlign('md');
}

<div class="servers">
  <p class="server-name">НМ</p>
  <p class="server-name">???</p>
  <img class="servers_image" src="content/nm11.png">
  <img class="servers_image" src="content/dont_know.png">
</div>

.servers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 50px;
  row-gap: 3em;
}
.server-name{
    /* display: inline-block; */
    /* width: 10px; */
    /* position: relative; */
    font-family: 'Roboto Slab', serif;
    font-size: 30px;
    /* position: relative; */
    /* top: 25px; */
    /* left: 85px; */
  text-align: center;
}
.servers_image{
   height: 300px;
   /* width: 230px; */
   border-radius: 35px;
   /* margin-bottom: 3em; */
   /* margin-right: 50px; */
}

права 777

failed to open stream: No such file or directory in

define('DIR_ROOT', __DIR__);
// Здесь у вас будет путь D:\OpenServer\domains\e-News

include DIR_ROOT.'/app/db/functions.php';
include DIR_ROOT.'/app/controllers/categories.php';

#content .hall-8 li:nth-of-type(-n+10) .item:nth-of-type(1) {
  margin-right: 190px;
}

/* Для экранов от 0 до 1999 px */
@media only screen and (max-width:1999px) {
  #content .hall-8 li:nth-of-type(-n+10) .item:nth-of-type(1) {
    margin-right: 100px;
  }
}

webpack.mix.site.js
webpack.mix.dashboard.js

<link href="{{ mix('css/main.css', 'static/frontend') }}" rel="stylesheet">

const mix = require('laravel-mix');
const mix2 = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js').vue()
mix2.options({
    vue: {       customElement: true     }
})
mix2.js('resources/js/app2.js', 'public/js').vue()