Як завантажити чудовий шрифт за допомогою SCSS (SASS) у Webpack, використовуючи відносні шляхи?

У моїй папці node_modules є awesome font, тому я намагаюся імпортувати його в свій головний файл .scss так:

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

Але компіляція Webpack збірки не вдається, кажучи мені

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

оскільки файл font-awesome.scss посилається на відносний шлях, "../fonts/".

Як я можу сказати scss \ webpack @import інший файл і використовувати папку цього файлу як домашню, щоб його відносні шляхи працювали належним чином?

Використовуйте

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

де $fa-font-pathзмінна видно вfont-awesome/scss/_variables.scss

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

Тильда "~" інтерполюється sass-loader з використанням механізму веб-пакета .

Здається, не існує жодного способу @import файлів, які мають власні відносні шляхи в SCSS \ SASS.

Тому натомість мені вдалося змусити це працювати:

• Імпортуйте файл scss \ css awesome у мої файли .js або .jsx, а не в файли таблиць стилів:

  імпортувати 'font-awesome / scss / font-awesome.scss';    

• Додайте це до мого файлу webpack.config:

    модуль:
    {
        навантажувачі:
        [
            {test: /\.js?$/, loader: 'babel-loader? cacheDirectory', виключити: / (node_modules | bower_components) /},
            {test: /\.jsx?$/, loader: 'babel-loader? cacheDirectory', виключити: / (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"},
        ]
    }

У мене працювали:

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

Це для імпортування font-awesome& необхідних шрифтів у проект. Інша зміна полягає у webpackконфігураціях для завантаження необхідних шрифтів за допомогою file-loader.

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

Вирішено шляхом зміни мого app.scss:

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

Цей спосіб корисний для збереження зовнішніх залежностей без змін і без версій.

Ось як це у мене вийшло, фокус у тому, щоб встановити $fa-font-pathшлях шрифтів наступним чином.

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

Примітка : Будь ласка, перевірте свою папку шрифтів node_modulesу моєму випадку це так@fortawesome/fontawesome-free

Я просто встановив шлях у своєму головному файлі scss, і він працює:

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

У мене працювало додавання resolve-url-loaderта ввімкненняsourceMaps

Я вже імпортував чудовий шрифт у своєму кореневому .scssфайлі:

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

Цей кореневий файл імпортується у мій main.jsфайл, визначений як точка входу Webpack:

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

Тоді мої остаточні правила модуля webpack виглядають так:

 ...
 {
    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]', },
  }
  ...

Примітка:

Я використовував mini-css-extract-plugin, які можна зареєструвати так:

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

url-loaderвимагає file-loaderвстановлення, тому, якщо ви отримуєте помилку типу:, cannot find module file-loaderпросто встановіть її:

npm i -D file-loader

Корисні посилання :

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

У версії 5.14 для мене працювало:

$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 +)

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