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

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

---

내 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하도록 지시하고 해당 파일의 폴더를 홈 폴더로 사용하여 상대 경로가 예상대로 작동하도록하려면 어떻게해야합니까?

---

사용하다

$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;

위에 설명 된대로 : http://fontawesome.io/get-started/

---

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+)?$/, 로더 : "파일 로더"},
        ]
    }

---

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

$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'
}

---

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

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

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

---

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

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

---

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

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

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

This root file is imported in my main.js file defined as Webpack's entrypoint:

import './scss/main.scss';
...

Then my final webpack module rules look like so:

 ...
 {
    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]', },
  }
  ...

Note:

I used mini-css-extract-plugin, which can be registered like this:

new MiniCssExtractPlugin({
    filename: 'css/main.css',
    chunkFilename: '[id].[hash]',
}),

---

url-loader requires file-loader to be installed, so if you get an error like: cannot find module file-loader, then just install it:

npm i -D file-loader

---

Useful Links:

https://github.com/webpack/webpack/issues/2771#issuecomment-277514138 https://github.com/rails/webpacker/issues/384#issuecomment-301318904

---

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';

---

See angular site for instructions Include Font Awesome

참고URL : https://stackoverflow.com/questions/33649761/how-do-i-load-font-awesome-using-scss-sass-in-webpack-using-relative-paths