Jak załadować font-awesome używając SCSS (SASS) w Webpack używając ścieżek względnych?

Mam font-awesome w moim folderze node_modules, więc próbuję zaimportować go do mojego głównego pliku .scss w następujący sposób:

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

Ale kompilacja pakietów Webpack kończy się niepowodzeniem, co mi mówi

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

ponieważ plik font-awesome.scss odnosi się do ścieżki względnej „../fonts/”.

Jak mogę powiedzieć scss \ webpack, aby zaimportował inny plik i użył folderu tego pliku jako folderu domowego, aby jego ścieżki względne działały zgodnie z oczekiwaniami?

Posługiwać się

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

gdzie $fa-font-pathzmienna jest widocznafont-awesome/scss/_variables.scss

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

Tylda "~" jest interpolowana przez program ładujący sass przy użyciu mechanizmu webpack .

Wygląda na to, że nie ma sposobu na @importowanie plików, które mają własne ścieżki względne w SCSS \ SASS.

Zamiast tego udało mi się uruchomić to :

• Zaimportuj plik scss \ css font-awesome do moich plików .js lub .jsx, a nie do moich plików arkuszy stylów:

  import 'font-awesome / scss / font-awesome.scss';    

• Dodaj to do mojego pliku webpack.config:

    moduł:
    {
        ładowarki:
        [
            {test: /\.js?$/, loader: 'babel-loader? cacheDirectory', exclude: / (node_modules | bower_components) /},
            {test: /\.jsx?$/, loader: 'babel-loader? cacheDirectory', exclude: / (node_modules | bower_components) /},
            {test: /\.scss?$/, loaders: ['style-loader', 'css-loader', 'sass-loader']},         
            {test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'file-loader? mimetype = image / svg + xml'},
            {test: /\.woff(\?v=\d+\.\d+\.\d+)?$/, loader: "file-loader? mimetype = application / font-woff"},
            {test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/, loader: "file-loader? mimetype = application / font-woff"},
            {test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "file-loader? mimetype = application / octet-stream"},
            {test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "file-loader"},
        ]
    }

Pracowały dla mnie następujące:

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

Ma to na celu zaimportowanie font-awesome& wymaganych czcionek do projektu. Inna zmiana dotyczy webpackkonfiguracji, aby załadować wymagane czcionki przy użyciu file-loader.

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

Rozwiązanie rozwiązane przez zmianę mojego app.scss:

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

Ten sposób jest przydatny, aby zachować niezmienione i niewersjonowane zależności zewnętrzne.

Tak to działało dla mnie, sztuka polega na ustawieniu $fa-font-pathścieżki czcionek w następujący sposób.

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

Uwaga : node_modulesw moim przypadku sprawdź folder z czcionkami@fortawesome/fontawesome-free

Po prostu ustawiłem ścieżkę w moim głównym pliku scss i działa:

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

Pomogło mi dodanie resolve-url-loaderi włączeniesourceMaps

Już zaimportowałem font-awesome w moim .scsspliku głównym :

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

Ten plik główny jest importowany do mojego main.jspliku zdefiniowanego jako punkt wejścia Webpack:

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

Wtedy moje końcowe reguły modułu webpacka wyglądają tak:

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

Uwaga:

Użyłem mini-css-extract-plugin, które można zarejestrować w ten sposób:

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

url-loaderwymaga file-loaderinstalacji, więc jeśli pojawi się błąd taki jak cannot find module file-loader:, po prostu zainstaluj:

npm i -D file-loader

Przydatne linki :

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

W przypadku wersji 5.14 działały następujące rozwiązania:

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

v.4 (Symofony 4 + pakiet sieciowy)

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