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

85

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?

Richard
źródło
Nie znam pakietu webpack, ale czy możesz włożyć plik .eot ../../node_modules/font-awesome/fonts/fontawesome-webfont.eot?
BrTkCa
Mógłbym to zrobić, zmieniając plik awesome fontów, ale wtedy straciłbym zmiany za każdym razem, gdy zaktualizuję npm, więc to nie jest opcja.
Richard
webpack działa razem express @Richard?
BrTkCa
Nie, nie korzystam z ekspresu
Richard
Używam npm do programu ładującego font-awesome Sass. czy użyłeś innego?
Winnemucca

Odpowiedzi:

139

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 .

user137794
źródło
11
U mnie nie działa, kompiluje się, ale na mojej stronie
pojawia
1
Musiałem ustawić jako $fa-font-path: "font-awesome/fonts"- czyli bez tyldy.
ctrlplusb
2
Czy mógłbyś nieco dokładniej wyjaśnić, gdzie edytujesz co? Nie rozumiem tej odpowiedzi
Richard
@Richard, czy udało Ci się sprawić, by to działało dla Ciebie? Oznacz to również jako odpowiedź!
Ascherer
Nie, użyłem wówczas mojej odpowiedzi poniżej.
Richard,
29

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"},
        ]
    }
Richard
źródło
Jak radzisz sobie z inną ścieżką czcionki? Chodzi mi o to, że importujesz tam scss, ale nie możesz zmienić ścieżki do plików czcionek, np. Jeśli chcesz ją zmienić do produkcji, a czcionki znajdują się w innym folderze. Jakieś pomysły? To jest to, co muszę zrobić.
LordTribual
Nie muszę jeszcze zmieniać materiału do produkcji. Wyobrażam sobie, że po prostu skopiowałbym wszystko z mojej lokalnej kompilacji i zostawił ścieżki w spokoju. W przeciwnym razie może zajrzyj do sekcji wyjściowej pliku webpack.config.js i zobacz, czy możesz zmienić ścieżki. Lub po prostu dodaj krok po kompilacji w sekcji skryptów package.json .
Richard
2
Działa. Zmieniłem ścieżkę do programu ładującego i teraz ładuje czcionki z określonej ścieżki.
LordTribual
Nie musisz dołączać pliku scss z niesamowitymi czcionkami do javascript. Nadal możesz dołączyć go do swojego scss, o ile ustawisz ścieżkę czcionki, taką jak sugeruje user137794, a następnie zaktualizuj plik webpack.config, aby uwzględnić typy czcionek zgodnie z sugestią.
Dave Lancea
Którego NMP użyłeś? Używam niesamowitego programu ładującego czcionki Sass i nie odnoszę sukcesu.
Winnemucca
20

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'
}
Yogesh Agrawal
źródło
12

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.

Wilk
źródło
2
Możesz ominąć linię 1 i użyć `! Default` na końcu linii 2.
Nighto
Szkoda, że ​​nie mogę uruchomić tej metody, ponieważ oznaczałoby to, że nie musiałem zmieniać _variables.scsspliku za każdym razem, gdy rekompilowałem projekt. Nie nadpisuje $fa-font-pathani żadnej innej zmiennej w tym zakresie .. więc nie jestem pewien, jak udało ci się to zrobić_
jesus g_force Harris
9

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

Muhammad
źródło
1
@Muhammed Właściwie ładowanie takich czcionek internetowych jest trochę trudne. Kiedy kompilujesz sass do css, zgodnie z twoim sposobem kompilacji, twoje czcionki mogą nie zostać skompilowane. Możesz skopiować folder webfonts bezpośrednio do swojego folderu publicznego / obok folderu css. W ten sposób niesamowity kod CSS dla czcionek znajdzie czcionki i będziesz po bezpiecznej stronie.
Mycodingproject
7

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';
ramon22
źródło
6

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

Doskonałość Ilesanmi
źródło
1

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";
sdvlpr
źródło
0

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';
Koudi
źródło