Comment charger font-awesome en utilisant SCSS (SASS) dans Webpack en utilisant relative paths?

j'ai font-awesome dans mon dossier node_modules donc j'essaie de l'importer dans mon main .fichier scss comme ceci:

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

mais la compilation de webpack échoue, me disant

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

parce que la police-génial.le fichier scss se réfère à un chemin relatif, '../police.'/

Comment puis-je dire à scss webpack d'importer un autre fichier et d'utiliser le dossier de ce fichier comme le dossier d'accueil pour que ses chemins relatifs fonctionnent comme prévu?

45
demandé sur Richard 2015-11-11 14:39:37

7 réponses

Utiliser

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

$fa-font-path variable est considérée dans font-awesome/scss/_variables.scss

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

comme décrit ci-dessus: http://fontawesome.io/get-started/

98
répondu user137794 2016-05-19 21:45:50

il ne semble pas y avoir de moyen d'importer des fichiers @qui ont leur propre chemin relatif dans SCSS \ SASS.

:

  • Importer le scss \ css font-awesome fichier dans mon .js ou .jsx fichiers, mes fichiers de feuille de style:

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

  • ajouter ceci à mon webpack.fichier de configuration:

    module:
    {
        loaders:
        [
            {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', '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"},
        ]
    }
20
répondu Richard 2015-11-11 12:15:00

ce qui a fonctionné pour moi:

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

C'est pour importer le font-awesome et les polices requises dans le projet. Autre changement est dans webpack configurations, pour charger les polices requises en utilisant file-loader.

{
  test: /\.scss$/,
  loaders: ['style', 'css?sourceMap', 'sass'
  ],
}, {
  test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)(\?.*$|$)/,
  loader: 'file'
}
17
répondu Yogesh Agrawal 2016-12-05 14:34:35

Résolu en changeant ma app.scss:

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

cette façon est utile pour garder les dépendances externes inchangées et non suivies en versions.

11
répondu Wilk 2017-03-27 10:04:12

je viens de mettre le chemin d'accès dans mon principal scss fichier et ça fonctionne :

$fa-font-path: "../node_modules/font-awesome/fonts";
@import '~font-awesome/scss/font-awesome.scss';
5
répondu ramon22 2017-12-06 06:25:07

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';
0
répondu Koudi 2018-04-17 09:29:18

ce qui a fonctionné pour moi était d'ajouter resolve-url-loader et activer sourceMaps

j'ai déjà importé font-awesome dans ma racine .scss fichier:

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

ce fichier racine est importé dans mon main.js le fichier défini comme Webpack du point d'entrée:

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

Alors mes règles finales de 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 peuvent être enregistrés comme ceci:

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

url-loader il faut file-loader pour être installé, donc, si vous obtenez une erreur du type: cannot find module file-loader, puis il suffit de l'installer: 

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

0
répondu Lon Ilesanmi 2018-07-14 09:59:56