Tengo font-awesome en mi carpeta node_modules, así que trato de importarlo en mi archivo .scss principal así:
@import "../../node_modules/font-awesome/scss/font-awesome.scss";
Pero la compilación de paquetes de Webpack falla, diciéndome
Error: Cannot resolve 'file' or 'directory' ../fonts/fontawesome-webfont.eot
porque el archivo font-awesome.scss se refiere a una ruta relativa, '../fonts/'.
¿Cómo puedo decirle a scss \ webpack que @importe otro archivo y use la carpeta de ese archivo como carpeta de inicio para que sus rutas relativas funcionen como espera?
../../node_modules/font-awesome/fonts/fontawesome-webfont.eot
?Respuestas:
Utilizar
$fa-font-path: "~font-awesome/fonts"; @import "~font-awesome/scss/font-awesome";
donde la
$fa-font-path
variable se ve enfont-awesome/scss/_variables.scss
$fa-font-path: "../fonts" !default;
La tilde "~" es interpolada por sass-loader usando el mecanismo webpack .
fuente
$fa-font-path: "font-awesome/fonts"
, es decir, sin la tilde.No parece haber ninguna forma de @importar archivos que tengan sus propias rutas relativas en SCSS \ SASS.
Entonces, en cambio, logré que esto funcionara:
Importe el archivo scss \ css font-awesome en mis archivos .js o .jsx, no en mis archivos de hoja de estilo:
Agregue esto a mi archivo webpack.config:
fuente
Lo siguiente funcionó para mí:
$fa-font-path: "~font-awesome/fonts"; @import "~font-awesome/scss/font-awesome";
Esto es para importar las
font-awesome
fuentes & requeridas en el proyecto. Otro cambio está en laswebpack
configuraciones, para cargar las fuentes requeridas usandofile-loader
.{ test: /\.scss$/, loaders: ['style', 'css?sourceMap', 'sass' ], }, { test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)(\?.*$|$)/, loader: 'file' }
fuente
Resuelto cambiando mi
app.scss
:@import '~font-awesome/scss/_variables.scss'; $fa-font-path: "~font-awesome/fonts"; @import '~font-awesome/scss/font-awesome.scss';
Esta forma es útil para mantener las dependencias externas sin cambios ni versiones.
fuente
_variables.scss
archivo cada vez que recompile el proyecto. No anula$fa-font-path
ni ninguna otra variable para el caso ... así que no estoy seguro de cómo pudo hacerlo_Acabo de establecer la ruta en mi archivo scss principal y funciona:
$fa-font-path: "../node_modules/font-awesome/fonts"; @import '~font-awesome/scss/font-awesome.scss';
fuente
Así es como funcionó para mí, el truco es establecer
$fa-font-path
la ruta de las fuentes de la siguiente manera.$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';
Nota : Por favor revise su carpeta de fuentes
node_modules
en mi caso es@fortawesome/fontawesome-free
fuente
Lo que funcionó para mí fue agregar
resolve-url-loader
y habilitarsourceMaps
Ya importé font-awesome en mi
.scss
archivo raíz :@import "~font-awesome/scss/font-awesome"; ...
Este archivo raíz se importa en mi
main.js
archivo definido como punto de entrada de Webpack:import './scss/main.scss'; ...
Entonces mis reglas finales del módulo de paquete web se ven así:
... { 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]', }, } ...
Nota:
Usé
mini-css-extract-plugin
, que se puede registrar así:new MiniCssExtractPlugin({ filename: 'css/main.css', chunkFilename: '[id].[hash]', }),
url-loader
requierefile-loader
ser instalado, por lo que si obtiene un error como:,cannot find module file-loader
simplemente instálelo:Enlaces útiles :
https://github.com/webpack/webpack/issues/2771#issuecomment-277514138 https://github.com/rails/webpacker/issues/384#issuecomment-301318904
fuente
Para la versión 5.14, lo siguiente funcionó para mí:
$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";
fuente
v.4 (symofony 4 + paquete web)
$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';
fuente