javascript - Angular 6 媒体查询问题

Question

我在 Angular 6 网站上工作。我有一个名为 our-work.ts 的组件， 我在文件 global.scss 中全局定义它的媒体查询，就像这样，

@media only screen and (max-width: 767px){
  .pull-custom-left {
    float: none;
  }
  .popular-work .img-section .hovereffect a, .popular-work .img-section .hovereffect p {
    margin-top: 10px;
    font-size: 14px;
  }

除媒体查询之外的其他样式在组件中工作正常，但媒体查询不起作用。 这是我的工作组件.ts

@Component({
  selector: 'app-our-works',
  templateUrl: './our-works-talk.component.html',
  styleUrls: ['./our-works-talk.component.scss'],

})

Answer 1

您必须将文件 global.scss 添加到您的 angular.json 文件中。

"styles": [
  "src/styles.css",
  "src/global.scss"
],