Как загрузить шрифт-awesome с помощью SCSS (SASS) в Webpack с использованием относительных путей?

У меня есть шрифт-awesome в моей папке node_modules, поэтому я пытаюсь импортировать его в свой основной файл .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 другого файла и использовать эту папку в качестве домашней папки, чтобы ее относительные пути работали так, как она ожидает?

Ответы

Ответ 1

Кажется, что не существует никакого способа для файлов @import, у которых есть свои относительные пути в SCSS\SASS.

Поэтому вместо этого мне удалось this работать:

  • Импортируйте файл scss\css font-awesome в файлы .js или .jsx, не мои файлы стилей:

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

  • Добавьте это в мой файл 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"},
        ]
    }

Ответ 2

Использование

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

Как описано выше: http://fontawesome.io/get-started/

Ответ 3

После меня работали:

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

Ответ 4

Решено, изменив мой app.scss:

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

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

Ответ 5

Я просто установил путь в основном файле scss, и он работает:

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

Ответ 6

Что мне sourceMaps resolve-url-loader и включение sourceMaps

Я уже импортировал font-awesome в мой корневой файл .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

Ответ 7

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

Ответ 9

Вы должны найти этот файл _font-awesome.scss и изменить его.

// Variables Override
// old
//$fa-font-path: "../fonts/fontawesome4" !default;
// new
$fa-font-path: "../fontawesome4" !default;