Come faccio a caricare font-awesome usando SCSS (SASS) in Webpack usando percorsi relativi?

Ho font-awesome nella mia cartella node_modules, quindi provo a importarlo nel mio file .scss principale in questo modo:

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

Ma la compilazione del raggruppamento Webpack fallisce, mi dice

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

perché il file font-awesome.scss fa riferimento a un percorso relativo, "../fonts/".

Come posso dire a scss \ webpack di @importare un altro file e utilizzare la cartella di quel file come cartella home in modo che i relativi percorsi funzionino come previsto?

Uso

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

dove $fa-font-pathsi vede la variabilefont-awesome/scss/_variables.scss

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

La tilde "~" è interpolata da sass-loader usando il meccanismo webpack .

Non sembra esserci alcun modo per @importare file che hanno i propri percorsi relativi in ​​SCSS \ SASS.

Così, invece sono riuscito ad ottenere questo al lavoro:

• Importa il file scss \ css font-awesome nei miei file .js o .jsx, non nei file del foglio di stile:

  importa "font-awesome / scss / font-awesome.scss";    

• Aggiungilo al mio file webpack.config:

    modulo:
    {
        caricatori:
        [
            {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-loader', 'css-loader', 'sass-loader']},         
            {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"},
        ]
    }

Di seguito ha funzionato per me:

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

Questo serve per importare i font-awesomecaratteri & richiesti nel progetto. Un'altra modifica riguarda le webpackconfigurazioni, per caricare i caratteri richiesti utilizzando file-loader.

{
  test: /\.scss$/,
  loaders: ['style', 'css?sourceMap', 'sass'
  ],
}, {
  test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)(\?.*$|$)/,
  loader: 'file'
}

Risolto cambiando il mio app.scss:

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

In questo modo è utile per mantenere invariate e non modificate le dipendenze esterne.

Questo è come ha funzionato per me, il trucco è impostare $fa-font-pathil percorso dei caratteri come segue.

$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 : controlla la cartella dei caratteri node_modulesnel mio caso lo è@fortawesome/fontawesome-free

Ho appena impostato il percorso nel mio file scss principale e funziona:

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

Quello che ha funzionato per me è stato aggiungere resolve-url-loadere abilitaresourceMaps

Ho già importato font-awesome nel mio .scssfile root :

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

Questo file radice viene importato nel mio main.jsfile definito come punto di ingresso di Webpack:

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

Quindi le mie regole finali del modulo webpack sembrano così:

 ...
 {
    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:

Ho usato mini-css-extract-plugin, che può essere registrato in questo modo:

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

url-loaderrichiede file-loaderdi essere installato, quindi se ricevi un errore come cannot find module file-loader:, installalo semplicemente:

npm i -D file-loader

Link utili :

https://github.com/webpack/webpack/issues/2771#issuecomment-277514138 https://github.com/rails/webpacker/issues/384#issuecomment-301318904

Per la versione 5.14, per me ha funzionato quanto segue:

$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";

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