node.js composer Comment charger font-awesome avec SCSS(SASS) dans Webpack en utilisant des chemins relatifs?




symfony 4 install bootstrap (7)

Font-awesome dans mon dossier node_modules, alors j'essaie de l'importer dans mon fichier .scss principal, comme ceci:

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

Mais la compilation Webpack bundling échoue, me disant

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

parce que le fichier font-awesome.scss fait référence à un chemin relatif, '../fonts/'.

Comment puis-je indiquer à scss \ webpack de @ importer un autre fichier et d'utiliser le dossier de ce fichier comme dossier de départ afin que ses chemins relatifs fonctionnent comme prévu?


Il ne semble pas y avoir de moyen de transférer des fichiers @import ayant leurs propres chemins relatifs dans SCSS \ SASS.

J'ai donc réussi à faire en sorte que this fonctionne:

  • Importez le fichier font-awesome scss \ css dans mes fichiers .js ou .jsx et non dans mes fichiers de feuilles de style:

    import 'font-awesome/scss/font-awesome.scss';    
  • Ajoutez ceci à mon fichier webpack.config:

    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"},
        ]
    }

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 méthode est utile pour conserver les dépendances externes inchangées et non versionné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’ajouter sourceMaps resolve-url-loader et d’activer sourceMaps

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

@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';
...

Ensuite, les règles finales de mon 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 l'installation du file-loader de file-loader , donc si vous obtenez une erreur du type: 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


Utilisation

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

où la variable $fa-font-path est visible dans font-awesome/scss/_variables.scss

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

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





webpack