Autoprefixer applies control comment to whole block 경고 솔루션

전언
최근pull 환경 보호 프로젝트의 최신 코드가 나왔는데 devServer를 시작할 때 터미널에서 다음과 같은 경고를 보냅니다.

 (Emitted value instead of an instance of Error) autoprefixer:xxx\code\ep-smp-pc-web\src\pages\SpecialAction\SpecialInfo\SpecialInfo.less:3218:3: Second Autoprefixer control comment was ignored. Autoprefixer applies control comment to whole block, not to next rules.

원본 파일 SpecialInfo.less을 찾았는데 먼저 Autoprefixer에 문제가 생겼을 거라고 생각했어요.

.describeList-value{
  line-height: .35rem;
  white-space: initial;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  /* autoprefixer: off */ 
  -webkit-box-orient: vertical;
  /* autoprefixer: on */
}

왜 Autoprefixer 주석을 사용해야 합니까? -webkit-box-orient는 구식 유행이 지난 CSS 속성이기 때문에 webpack에 postcss-loader를 설정하면 Autoprefixer가 자동으로 제거됩니다.
해결 방법
그러면 -webkit-box-orient 속성을 어떻게 보존합니까?
다음과 같은 몇 가지 해결 방안이 있다.
1. 구성하지 않음 Autoprefixer 속성 postcss-loader의 options에는 Autoprefixer 구성이 도입되지 않습니다.
단점: 다른 브라우저 스타일을 호환해야 하는 곳은 모두 개발 자체에 접두사를 붙여야 하기 때문에 피곤해서 취할 수 없다.
2. 취소 Autoprefixer remove 기능 webpack.config 파일에서 Autoprefixer 설정을 수정하고 한 줄 설정을 추가할 수 있다 remove: false.

{
    loader: require.resolve('postcss-loader'),
    options: {
      // Necessary for external CSS imports to work
      // https://github.com/facebookincubator/create-react-app/issues/2677
      ident: 'postcss',
      plugins: () => [
        require('postcss-flexbugs-fixes'),
        autoprefixer({
          browsers: [
            '>1%',
            'last 4 versions',
            'Firefox ESR',
            'not ie < 9', // React doesn't support IE8 anyway
          ],
          flexbox: 'no-2009',
          remove: false,
        }),
    ],
  },
},

단점: Autoprefixer가 자동으로 -webkit-box-orient 속성을 삭제하는 이상 일부 CSS 속성은 진심으로 유행이 지났다고 생각하고 개발자가 사용하는 것을 추천하지 않는다( Autoprefixer control comment기능을 설정하여 개발자에게 국부적 disable Autoprefixer인 기능을 사용하도록 한다).만약 정말로 닫기 Autoprefixer remove 기능이 있다면 그 프로젝트에는 유행이 지난 CSS 속성이 대량으로 가득 차서 유지보수에 불리할 수 있습니다. 이런 방안은 개인적으로 사용하는 것을 추천하지 않습니다.
3. 궁극적인 방안: 정확한 사용 autoprefixer control comment 기능
앞에서 언급한 경고 알림을 돌아보면 다음과 같다.

 Second Autoprefixer control comment was ignored. Autoprefixer applies control comment to whole block, not to next rules.

이 영어를 진지하게 이해하고 대사로 번역하면 두 번째 Autoprefixer 주석은 무시되고 Autoprefixer 주석은 다음 규칙이 아니라 전체 코드 블록에 사용되어야 한다.즉 /* autoprefixer: off */는 하나의 코드 블록에서 더 이상 작용할 수 없다 /* autoprefixer: on */.
참고: 전체 코드 블록은 스타일 .describeList-value {} 중괄호의 범위를 가리키며 현재 Less 파일의 전체 범위를 가리키지 않습니다. autoprefixer 홈페이지를 보면 홈페이지는 같은 코드 블록에 여러 번 사용 control comment에 대해 알림 설명을 했다. Note that comments that disable the whole block should not be featured in the same block twice。따라서 최종적으로 /* autoprefixer: off */ 주석 하나만 사용하면 되고 /* autoprefixer: on */ 주석을 취소하면 warning 사라진다.스타일은 다음과 같습니다.

.describeList-value{
  line-height: .35rem;
  white-space: initial;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  /* autoprefixer: off */ 
  //        block，   
  -webkit-box-orient: vertical;
}

/* autoprefixer: off */ 또는 /* autoprefixer: on */ 를 block 어느 곳에 두면 됩니까? 왜냐하면 이것은 전체 block에 작용하기 때문입니다.

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

다양한 언어의 JSON

JSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

Autoprefixer applies control comment to whole block 경고 솔루션

좋은 웹페이지 즐겨찾기