상대 경로를 사용하여 Webpack에서 SCSS (SASS)를 사용하여 멋진 글꼴을로드하려면 어떻게해야합니까?


84

내 node_modules 폴더에 font-awesome이 있으므로 다음과 같이 기본 .scss 파일로 가져 오려고합니다.

@import "../../node_modules/font-awesome/scss/font-awesome.scss";

하지만 Webpack 번들링 컴파일이 실패합니다.

Error: Cannot resolve 'file' or 'directory' ../fonts/fontawesome-webfont.eot 

font-awesome.scss 파일은 상대 경로 '../fonts/'를 참조하기 때문입니다.

scss \ webpack에게 다른 파일을 @import하도록 지시하고 해당 파일의 폴더를 홈 폴더로 사용하여 상대 경로가 예상대로 작동하도록하려면 어떻게해야합니까?


나는 webpack을 모르지만 .eot를 넣을 수 ../../node_modules/font-awesome/fonts/fontawesome-webfont.eot있습니까?
BrTkCa

글꼴 멋진 파일을 변경하여 그렇게 할 수 있지만 npm을 업데이트 할 때마다 변경 사항을 잃게되므로 옵션이 아닙니다.
Richard

webpack은 @Richard와 함께 작동합니까?
BrTkCa

아니, 표현을 사용하지
리처드

글꼴 멋진 sass 로더에 npm을 사용하고 있습니다. 다른 것을 사용 했습니까?
Winnemucca

답변:


139

사용하다

$fa-font-path: "~font-awesome/fonts";
@import "~font-awesome/scss/font-awesome";

를 Where $fa-font-path변수로 보인다font-awesome/scss/_variables.scss

$fa-font-path: "../fonts" !default;

물결표 "~"는 webpack mecanism을 사용하여 sass-loader에 의해 보간됩니다 .


11
나를 위해 작동하지 않습니다, 그것은 컴파일하지만 난 그냥 ... 내 웹 사이트에 사각형을 얻을 : /
도노반 Charpin

1
나는 $fa-font-path: "font-awesome/fonts"틸드없이 내 것을 설정해야했다 .
ctrlplusb

2
어디에서 무엇을 편집하는지 좀 더 정확하게 설명해 주시겠습니까? 나는이 대답을 이해하지 못하는
리처드

@Richard가 당신을 위해 일할 수 있었습니까? 또한 이것을 답으로 표시하십시오!
Ascherer 2011

아니요, 당시 아래 답변을 사용했습니다.
리처드

29

SCSS \ SASS에 고유 한 상대 경로가있는 @import 파일에 대한 방법이없는 것 같습니다.

그래서 대신 이것을 작동 시킬 수있었습니다 .

  • 내 스타일 시트 파일이 아닌 내 .js 또는 .jsx 파일에서 scss \ css font-awesome 파일을 가져 오십시오 .

    import 'font-awesome / scss / font-awesome.scss';    
  • 내 webpack.config 파일에 다음을 추가하십시오.

    기준 치수:
    {
        로더 :
        [
            {테스트 : /\.js?$/, 로더 : 'babel-loader? cacheDirectory', 제외 : / (node_modules | bower_components) /},
            {테스트 : /\.jsx?$/, 로더 : 'babel-loader? cacheDirectory', 제외 : / (node_modules | bower_components) /},
            {test : /\.scss?$/, 로더 : [ 'style-loader', 'css-loader', 'sass-loader']},         
            {테스트 : /\.svg(\?v=\d+\.\d+\.\d+)?$/, 로더 : 'file-loader? mimetype = image / svg + xml'},
            {테스트 : /\.woff(\?v=\d+\.\d+\.\d+)?$/, 로더 : "file-loader? mimetype = application / font-woff"},
            {테스트 : /\.woff2(\?v=\d+\.\d+\.\d+)?$/, 로더 : "file-loader? mimetype = application / font-woff"},
            {테스트 : /\.ttf(\?v=\d+\.\d+\.\d+)?$/, 로더 : "file-loader? mimetype = application / octet-stream"},
            {테스트 : /\.eot(\?v=\d+\.\d+\.\d+)?$/, 로더 : "파일 로더"},
        ]
    }

다른 글꼴 경로를 어떻게 처리합니까? 내 말은 거기에서 scss를 가져 오지만 글꼴 파일의 경로를 변경할 수 없다는 것을 의미합니다. 예를 들어 프로덕션을 위해 변경해야하고 글꼴이 다른 폴더에있는 경우. 어떤 아이디어? 그게 내가해야 할 일입니다.
LordTribual dec.

나는 아직 생산을 위해 물건을 바꿀 필요가 없습니다. 내 로컬 빌드에서 모든 것을 복사하고 경로는 그대로 두겠다고 상상합니다. 그렇지 않으면 webpack.config.js출력 섹션을 보고 경로를 변경할 수 있는지 확인하십시오. 또는 package.json 스크립트 섹션 에 빌드 후 단계를 추가 하십시오.
Richard

2
작동합니다. 로더의 경로를 변경하고 이제 지정된 경로에서 글꼴을로드합니다.
LordTribual

javascript에 font-awesome scss 파일을 포함 할 필요가 없습니다. user137794가 제안하는 것과 같은 글꼴 경로를 설정하는 한 scss에 계속 포함 할 수 있으며 제안한대로 글꼴 유형을 고려하도록 webpack.config 파일을 업데이트하십시오.
Dave Lancea

어떤 npm을 사용하셨습니까? 나는 sass 글꼴 굉장한 로더를 사용하고 있으며 성공하지 못했습니다.
Winnemucca

20

다음은 나를 위해 일했습니다.

$fa-font-path: "~font-awesome/fonts";
@import "~font-awesome/scss/font-awesome";

이것은 font-awesome프로젝트에서 & 필수 글꼴 을 가져 오는 것 입니다. 를 webpack사용하여 필요한 글꼴을로드하기위한 다른 변경 사항은 구성 에 있습니다 file-loader.

{
  test: /\.scss$/,
  loaders: ['style', 'css?sourceMap', 'sass'
  ],
}, {
  test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)(\?.*$|$)/,
  loader: 'file'
}

12

app.scss: 을 변경하여 문제가 해결되었습니다 .

@import '~font-awesome/scss/_variables.scss';
$fa-font-path: "~font-awesome/fonts";
@import '~font-awesome/scss/font-awesome.scss';

이 방법은 외부 종속성을 변경하지 않고 버전도 지정하지 않는 데 유용합니다.


2
라인 1을 피하고 라인 2 끝에`! default`를 사용할 수 있습니다.
Nighto

_variables.scss프로젝트를 다시 컴파일 할 때마다 파일 을 변경할 필요가 없었기 때문에이 방법을 사용할 수 없다는 것은 아쉽습니다. 그것은 $fa-font-path그 문제에 대한 재정의 또는 다른 변수가 없습니다. 그래서 당신이 그것을 어떻게 할 수 있었는지 확신하지 못합니다 _
예수 g_force Harris

7

내 주 scss 파일에 경로를 설정하고 작동합니다.

$fa-font-path: "../node_modules/font-awesome/fonts";
@import '~font-awesome/scss/font-awesome.scss';

7

이것이 나를 위해 일한 방식이며, 트릭은 $fa-font-path다음과 같이 글꼴의 경로 를 설정 하는 것입니다.

$fa-font-path: "~@fortawesome/fontawesome-free/webfonts/";
@import '~@fortawesome/fontawesome-free/scss/fontawesome.scss';
@import '~@fortawesome/fontawesome-free/scss/solid.scss';
@import '~@fortawesome/fontawesome-free/scss/brands.scss';

참고 : node_modules내 경우에는 글꼴 폴더를 확인하십시오.@fortawesome/fontawesome-free


1
@Muhammed 실제로 이와 같은 웹 폰트를로드하는 것은 약간 까다 롭습니다. sass를 css로 컴파일 할 때 컴파일 방법에 따라 글꼴이 컴파일되지 않을 수 있습니다. webfonts 폴더를 css 폴더 옆에있는 public / 폴더에 직접 복사 할 수 있습니다. 이런 식으로 글꼴 멋진 CSS 코드가 글꼴을 찾고 안전하게 사용할 수 있습니다.
Mycodingproject

6

나를 위해 일한 것은 추가 resolve-url-loader하고 활성화하는 것이 었습니다.sourceMaps

이미 루트 .scss파일 에 font-awesome을 가져 왔습니다 .

@import "~font-awesome/scss/font-awesome";
...

이 루트 파일은 main.jsWebpack의 진입 점으로 정의 된 내 파일 에서 가져 옵니다.

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-loaderfile-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


1

버전 5.14의 경우 다음이 저에게 효과적이었습니다.

$fa-font-path : '../node_modules/@fortawesome/fontawesome-free/webfonts';

@import "../node_modules/@fortawesome/fontawesome-free/scss/solid";

@import "../node_modules/@fortawesome/fontawesome-free/scss/brands";

@import "../node_modules/@fortawesome/fontawesome-free/scss/fontawesome";

0

v.4 (symofony 4 + webpack)

$fa-font-path: "~components-font-awesome/webfonts";
@import '~components-font-awesome/scss/fa-brands';
@import '~components-font-awesome/scss/fa-regular';
@import '~components-font-awesome/scss/fa-solid';
@import '~components-font-awesome/scss/fontawesome';
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.