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

Program / 글쓴이

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

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

답변

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

답변

이것이 나를 위해 일한 방식이며, 트릭은 $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

답변

나를 위해 일한 것은 추가 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