문제 웹팩

Question

문제로 직접 이동

와 노드 패키지를 구축 ...

lib.js 코드

import DemoModule from './DemoModule.jsx'; 
import './styles/fonts/fonts.scss'; 
import './styles/styles.scss'; 

module.exports = { 
    DemoModule: DemoModule, 
}; 

Fonts.scss

@font-face { 
    font-family: 'Demo font'; 
    src: url('./demo-font.otf') format('opentype'); 
    font-weight: 300; 
} 

웹 팩 코드

내가 NPM 실행을 실행하면

module.exports = { 
    entry: './src/lib.js', 
    target: 'node', 
    output: { 
     filename: 'index.js', 
     path: './lib/', 
     library: "libName", 
     libraryTarget: 'commonjs2', 
    }, 
    plugins: [ 
     *** 
    ], 
    module: { 
     loaders: [ 
      { test: /\.js$/, loader: 'babel-loader' }, 
      { test: /\.jsx$/, loader: 'babel-loader' }, 
      { test: /\.json$/, loader: 'json' }, 
      { test: /\.scss$/, loaders: ['style', 'css', 'sass'] }, 
      { test: /\.png$/, loader: 'url-loader' }, 
      { test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader?limit=10000&mimetype=application/font-woff" }, 
      { test: /\.[ot]tf?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'url-loader?limit=10000&mimetype=application/octet-stream' }, 
      { test: /\.(eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "file-loader" } 
     ] 
    } 
}; 

이 명령은 lib 디렉토리에 모든 것을 컴파일하는 index.js를 만들고도 그 디렉토리에 데모 font.ots 이동을 구축 할 수 있습니다.

Direcotry는

/lib 
    index.js 
    demo-font.ots 

처럼 보인다하지만 난 다른 프로젝트 node_modules에서이 패키지를 사용할 때이 www.abc.com/demo-font.ots과 실종처럼 글꼴을 찾습니다. 글꼴을로드 할 수 없다는 점을 제외하면 모든 것이 작동합니다.

이 구성에서 누락 된 사항은 무엇입니까? 당신이 데모 font.otf

의 현재 작업 디렉토리에보고를 말하고있다 그래서

src: url('./demo-font.otf') format('opentype'); 

기대 글꼴이 루트에 있는지 경우 다음과

Answer 1

귀하의 SCSS 파일은 컴파일 하지만 글꼴이 다른 곳 (예 : styles/fonts 디렉토리)에 있으면 404가 표시되지 않습니다.

개발자 도구 (Chrome을 사용하므로 Ctrl + Shift + J이므로)로 이동하여 웹 응용 프로그램에서 글꼴이 있어야 할 위치를 확인하십시오. 또한 "소스보기"를 확인하고 다른 프로젝트에서 관련 위치를 수정하십시오.