나를 위해 일한 것은 추가 resolve-url-loader
하고 활성화하는 것이 었습니다.sourceMaps
이미 루트 .scss
파일 에 font-awesome을 가져 왔습니다 .
@import "~font-awesome/scss/font-awesome";
...
이 루트 파일은 main.js
Webpack의 진입 점으로 정의 된 내 파일 에서 가져 옵니다.
import './scss/main.scss';
...
그런 다음 최종 웹팩 모듈 규칙은 다음과 같습니다.
...
{
test: /\.(sa|sc|c)ss$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
{ loader: 'postcss-loader', options: { sourceMap: true }, },
'resolve-url-loader',
{ loader: 'sass-loader', options: { sourceMap: true }, },
],
}, {
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
options: { limit: 1000, name: 'fonts/[name].[ext]', },
}
...
노트 :
다음 mini-css-extract-plugin
과 같이 등록 할 수있는을 사용 했습니다.
new MiniCssExtractPlugin({
filename: 'css/main.css',
chunkFilename: '[id].[hash]',
}),
url-loader
file-loader
설치 가 필요 하므로 cannot find module file-loader
다음 과 같은 오류가 발생하면 설치하십시오.
npm i -D file-loader
유용한 링크 :
https://github.com/webpack/webpack/issues/2771#issuecomment-277514138
https://github.com/rails/webpacker/issues/384#issuecomment-301318904
../../node_modules/font-awesome/fonts/fontawesome-webfont.eot
있습니까?