vue-cli 2 포장 전과 포장 후의 css 접두사 가 일치 하지 않 는 문제 해결

입김 을 불다
최근 vue-cli 2 를 기반 으로 웹 팩 을 배우 고 vue-cli 2 의 웹 팩 설정 을 한 번 훑 어 보 니 몸 이 텅 빈 것 같 습 니 다.그러나 많은 것 을 얻 었 습 니 다.적어도 웹 팩 의 기본 적 인 방법,개발 환경 과 생산 환경의 개념,서로 다른 환경 에 따라 서로 다른 웹 팩 설정,그리고 자주 사용 하 는 플러그 인의 용법 등 을 파악 하 였 습 니 다.
문제 가 생 겼 다
vue-cli 를 기반 으로 웹 팩 을 설정 하지 않 고 프로젝트 를 탐색 하 는 것 은 매우 시원 합 니 다.그러나 제 가 아주 시원 하 게 훑 었 을 때 문 제 를 발 견 했 습 니 다.바로 프로젝트 포장 전과 포장 후의 css 접두사 가 일치 하지 않 습 니 다.다음 과 같 습 니 다(브 라 우 저:Chrome):
--앱 vue 에 있 는 img 에 스타일 추가

img{
 display: flex;
 transform: translateX(200px)
}

--포장 전(즉 개발 환경)img 의 스타일

--포장 후(즉 생산 환경)img 의 스타일

위 에서 보 듯 이 포장 전과 포장 후 요소 가 가지 고 있 는 css 접두사 가 일치 하지 않 습 니 다.css 3 속성 을 요소 에 설정 할 때 브 라 우 저 접 두 사 를 가지 고 호 환 되 기 를 바 랍 니 다.vue-cli 도 이러한 기능 을 구축 해 주 었 습 니 다.
--postcss 설정 은.postcssrc.js 에 적 혀 있 습 니 다.

module.exports = {
 "plugins": {
  "postcss-import": {},
  "postcss-url": {},
  // to edit target browsers: use "browserslist" field in package.json
  "autoprefixer": {}
 }
}

--브 라 우 저 규칙 은 package.json 에 적 혀 있다.

 "browserslist": [
  "> 1%",
  "last 2 versions",
  "not ie <= 8"
 ]

--개발 환경(build/webpack.dev.conf.js)스타일 관련 loader

 module: {
  rules: utils.styleLoaders({ 
   sourceMap: config.dev.cssSourceMap, 
   usePostCSS: true })
 },

--생산 환경(build/webpack.prd.conf.js)양식 관련 loader

 module: {
  rules: utils.styleLoaders({
   sourceMap: config.build.productionSourceMap,
   extract: true,
   usePostCSS: true
  })
 },

위 에서 보 듯 이 vue-cli 의 개발 환경 과 생산 환경 은 모두 postcss 를 사 용 했 고 설정 은 같 습 니 다.그런데 왜 포장 전과 포장 후 요소 가 가지 고 있 는 css 접두사 가 일치 하지 않 습 니까?
잠 금 문제
build/webpack.dev.conf.js 와 build/webpack.prod.conf.js 두 파일 을 비교 해 볼 수 있 습 니 다.css 에 영향 을 주 는 것 은 module 에서 스타일 을 처리 하 는 loader 와 css 를 처리 하 는 플러그 인 plugin 입 니 다.접두사 에 영향 을 주 는 postcss 의 loader 가 두 부분 에서 일치 하 는 것 을 알 수 있 습 니 다.그러면 문 제 는 css 를 처리 하 는 플러그 인 에 있 습 니 다.
조사 결과 웹 pack.prod.conf.js 설정 에 css 처리 플러그 인 이 두 개 더 있 는 것 으로 나 타 났 습 니 다.다음 과 같 습 니 다.

ExtractTextPlugin 은 분 리 된 css 파일 을 추출 하 는 것 입 니 다.css 접두사 에 영향 을 주지 않 습 니 다.제거 하면 문 제 는 OptimizeCSSPlugin 플러그 인 에 잠 겨 있 습 니 다.더 나 아가,우리 가 OptimizeCSSPlugin 플러그 인 을 주석 하고 포장 테스트 를 했 을 때,이때 개발 환경 과 생산 환경의 css 접두사 가 일치 하 는 것 을 발견 하 였 습 니 다.바로 그것 입 니 다!!!
npm 홈 페이지 를 열 어 이 녀석 을 찾 아 보 자https://www.npmjs.com/package/optimize-css-assets-webpack-plugin이것 은 css 코드 압축 을 최적화 하 는 플러그 인 이지 만 실 망 스 럽 고 문서 설명 이 매우 적다.
그러나 우 리 는 한 마디 가 매우 중요 하 다 는 것 을 알 았 다.

귀신 이 라 니 요?이 물건 은 cssnano 에 의존 하고 있 습 니 다.이 플러그 인 도 css 형식,접두사 등 을 최적화 처리 하 는 데 사 용 됩 니 다.또한 autoprefixer 설정 인자 도 있 습 니 다.홈 페이지 로 바로 갑 니 다.

브 라 우 저 옵션 에 따라 불필요 한 접 두 사 를 삭제 합 니 다.기본적으로 CSS 파일 에 새 접 두 사 를 추가 하지 않 습 니 다.이 플러그 인의 autoprefixer(기본 값 은 true)는 불필요 하 다 고 생각 하 는 접 두 사 를 삭 제 했 습 니 다.postcss 의 autoprefixer 는 우리 가 설정 한 브 라 우 저 범위 의 접 두 사 를 추가 하여 완벽 하 게 충돌 하 였 습 니 다.
문 제 를 해결 하 다
마지막 으로 github 에서 해결 방안 을 찾 았 습 니 다.

상위 코드:

 new OptimizeCSSPlugin({
   cssProcessorOptions: config.build.productionSourceMap
    ? { safe: true, map: false,autoprefixer:false }
    : { safe: true, autoprefixer: false}
  }),

결론.
마지막 으로 우리 dev 와 build 에서 나 온 css 접 두 사 를 보면 일치 할 것 입 니 다.
문 제 는 OptimizeCSSPlugin 에 cssnano 에 의존 하고 있 으 며,cssnano 에 도 autoprefixer 설정 인자 가 있 습 니 다.불필요 한 접 두 사 를 삭제 하 는 역할 을 합 니 다.(일부 브 라 우 저 에 필요 한 접 두 사 를 잘못 삭제 할 수 있 습 니 다)이것 은 postcss 의 autoprefixer 효과 와 충돌 하여 사용 하지 않 습 니 다.
지금 포장 한 것 은 우리 가 설정 한 브 라 우 저 범위 에 대응 하 는 접두사 와 일치 합 니 다.글 전체 가 좀 지루 한 것 같 습 니 다.하지만 이것 은 제 가 이 문 제 를 해결 하 는 혈 로 입 니 다.하지만 기록 해 보 세 요.분석 이 잘못된 문제 가 있 으 면 지적 해 주 십시오.감사합니다!
 이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.