WebPack + SASS : 상대 이미지 경로를 생성하는 방법은 무엇입니까?

Question

contextPath를 추가하기 위해 프록시 (proxyPass) 역할을하는 Apache 가상 호스트 뒤에 웹 응용 프로그램을 설정하려고합니다. 물론 가상 호스트 만이 컨텍스트 경로를 알아야합니다.

로드되지 않은 배경 이미지를 제외한 모든 항목이 정상입니다. 이유는 간단합니다 :

SASS 이미지 URL은 절대적이며 contextPath를 포함하지 않습니다.

최종 CSS에서 생성 된 URL이 상대적이면 이미지를 올바르게로드해야합니다.

SASS/Webpack을 사용하여 상대 경로를 생성하는 방법은 무엇입니까?

---

참고 : 나는 SASS 파일, 절대 또는 상대 경로를 사용하는 무엇이든

는, 최종 출력은 항상 절대입니다. 나는 현재 사용

• 웹팩 3
• 노드 말대꾸 4.5.3
• 말대꾸 로더 6.0.6
• 추출물 텍스트 웹팩 - 플러그인 3.0.0

I을 파일 로더 (나는 tryed하지만 아무것도 변경하지 않음)를 사용하지 말고 dist 디렉토리의 모든 이미지를 복사하십시오.

Answer 1

해결책은 CSS 로더에서 (css-loader documentation 참조)의 false로 false url 옵션을 설정하는 것이 었습니다. 게다가 SASS 소스에서 상대 경로를 사용하자마자 파일 로더가 필요합니다. 이미 dist 디렉토리에있는 파일을 복사하는 CopyWebpackPlugin을 사용하면 emitFile을 false로 설정해야합니다.

 { 
     test: /\.(css|sass|scss)$/, 
     use: ExtractTextPlugin.extract({ 
      fallback: 'style-loader', 
      use: [{ 
      loader: 'css-loader', 
      options: { url: false } 
      }, { 
      loader: 'sass-loader' 
      }] 
     }) 
     }, { 
     test: /\.(png|svg)$/, 
     exclude: /node_modules/, 
     use: [{ 
      loader: 'file-loader?name=img/[name].[ext]', 
      options: { 
      emitFile: false 
      } 
     }] 
     }