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?
../../node_modules/font-awesome/fonts/fontawesome-webfont.eot
?Odpowiedzi:
Posługiwać się
$fa-font-path: "~font-awesome/fonts"; @import "~font-awesome/scss/font-awesome";
gdzie
$fa-font-path
zmienna jest widocznafont-awesome/scss/_variables.scss
$fa-font-path: "../fonts" !default;
Tylda "~" jest interpolowana przez program ładujący sass przy użyciu mechanizmu webpack .
źródło
$fa-font-path: "font-awesome/fonts"
- czyli bez tyldy.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:
Dodaj to do mojego pliku webpack.config:
źródło
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 dotyczywebpack
konfiguracji, aby załadować wymagane czcionki przy użyciufile-loader
.{ test: /\.scss$/, loaders: ['style', 'css?sourceMap', 'sass' ], }, { test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)(\?.*$|$)/, loader: 'file' }
źródło
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.
źródło
_variables.scss
pliku za każdym razem, gdy rekompilowałem projekt. Nie nadpisuje$fa-font-path
ani żadnej innej zmiennej w tym zakresie .. więc nie jestem pewien, jak udało ci się to zrobić_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_modules
w moim przypadku sprawdź folder z czcionkami@fortawesome/fontawesome-free
źródło
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';
źródło
Pomogło mi dodanie
resolve-url-loader
i włączeniesourceMaps
Już zaimportowałem font-awesome w moim
.scss
pliku głównym :@import "~font-awesome/scss/font-awesome"; ...
Ten plik główny jest importowany do mojego
main.js
pliku 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-loader
wymagafile-loader
instalacji, więc jeśli pojawi się błąd taki jakcannot find module file-loader
:, po prostu zainstaluj:Przydatne linki :
https://github.com/webpack/webpack/issues/2771#issuecomment-277514138 https://github.com/rails/webpacker/issues/384#issuecomment-301318904
źródło
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";
źródło
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';
źródło