J’ai un fichier font-awesome dans mon dossier node_modules, donc j’essaie de l’importer dans mon fichier .scss principal comme ceci:
@import "../../node_modules/font-awesome/scss/font-awesome.scss"; Mais la compilation des packs Webpack échoue, me disant
Error: Cannot resolve 'file' or 'directory' ../fonts/fontawesome-webfont.eot
car le fichier font-awesome.scss fait référence à un chemin relatif, “../fonts/”.
Comment puis-je indiquer à scss \ webpack @import un autre fichier et utiliser le dossier de ce fichier comme dossier de base pour que ses chemins relatifs fonctionnent comme prévu?
Utilisation
$fa-font-path: "~font-awesome/fonts"; @import "~font-awesome/scss/font-awesome";
où la variable $fa-font-path est vue dans font-awesome/scss/_variables.scss
$fa-font-path: "../fonts" !default;
Comme décrit ci-dessus: http://fontawesome.io/get-started/
Il ne semble pas y avoir de moyen pour les fichiers @import qui ont leurs propres chemins relatifs dans SCSS \ SASS.
Au lieu de cela, j’ai réussi à faire fonctionner ceci :
Importez le fichier scss \ css font-awesome dans mes fichiers .js ou .jsx, pas dans mes fichiers de feuilles de style:
importer 'font-awesome / scss / font-awesome.scss';
Ajoutez ceci à mon fichier webpack.config:
module:
{
chargeurs:
[
{test: /\.js?$/, loader: 'babel-loader? cacheDirectory', à exclure: / (node_modules | bower_components) /},
{test: /\.jsx?$/, loader: 'babel-loader? cacheDirectory', exclude: / (node_modules | bower_components) /},
{test: /\.scss?$/, loaders: ['style', 'css', 'sass']},
{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"},
]
}
Après a travaillé pour moi:
$fa-font-path: "~font-awesome/fonts"; @import "~font-awesome/scss/font-awesome";
Ceci permet d’importer les font-awesome & required dans le projet. Une autre modification webpack configurations webpack , pour charger les fonts requirejses à l’aide de file-loader .
{ test: /\.scss$/, loaders: ['style', 'css?sourceMap', 'sass' ], }, { test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)(\?.*$|$)/, loader: 'file' }
Résolu en changeant mon app.scss :
@import '~font-awesome/scss/_variables.scss'; $fa-font-path: "~font-awesome/fonts"; @import '~font-awesome/scss/font-awesome.scss';
Cette manière est utile pour garder les dépendances externes inchangées et non versées.
Je viens de définir le chemin dans mon fichier scss principal et cela fonctionne:
$fa-font-path: "../node_modules/font-awesome/fonts"; @import '~font-awesome/scss/font-awesome.scss';
v.4 (symofony 4 + webpack)
$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';
Ce qui a fonctionné pour moi a été d’append sourceMaps resolve-url-loader et d’activer les sourceMaps
J’ai déjà importé font-awesome dans mon fichier racine .scss :
@import "~font-awesome/scss/font-awesome"; ...
Ce fichier racine est importé dans mon fichier main.js défini comme point d’entrée de Webpack:
import './scss/main.scss'; ...
Alors les règles finales du module webpack ressemblent à ceci:
... { 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]', }, } ...
Remarque:
J’ai utilisé mini-css-extract-plugin , qui peut être enregistré comme ceci:
new MiniCssExtractPlugin({ filename: 'css/main.css', chunkFilename: '[id].[hash]', }),
url-loader nécessite que file-loader soit installé, donc si vous obtenez une erreur comme: cannot find module file-loader , installez-le simplement:
npm i -D file-loader
Liens utiles :
https://github.com/webpack/webpack/issues/2771#issuecomment-277514138 https://github.com/rails/webpacker/issues/384#issuecomment-301318904