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

85

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

Ричард
источник
Я не знаю webpack, но можно ли вставить .eot ../../node_modules/font-awesome/fonts/fontawesome-webfont.eot?
BrTkCa
Я мог бы сделать это, изменив файл font-awesome, но тогда я терял бы изменения всякий раз, когда обновляю npm, так что это не вариант.
Ричард
webpack работает вместе экспресс @Richard?
BrTkCa
Нет, экспресс не используется
Ричард
Я использую npm для потрясающего шрифтового загрузчика sass. вы использовали другой?
Winnemucca

Ответы:

139

Использовать

$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 с использованием механизма webpack .

user137794
источник
11
У меня не работает, он компилируется, но я просто получаю прямоугольник на моем веб-сайте ...: /
Донован Чарпин
1
Мне пришлось установить мой как $fa-font-path: "font-awesome/fonts"- то есть без тильды.
ctrlplusb
2
Не могли бы вы подробнее объяснить, где что редактируете? Я не понимаю этого ответа
Ричард
@ Ричард, вы смогли заставить это работать на вас? Также отметьте это как ответ!
Ascherer
Нет, в то время я использовал свой ответ ниже.
Ричард
29

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

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

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

    import 'font-awesome / scss / font-awesome.scss';    
  • Добавьте это в мой файл webpack.config:

    модуль:
    {
        погрузчики:
        [
            {тест: /\.js?$/, загрузчик: 'babel-loader? cacheDirectory', исключить: / (node_modules | bower_components) /},
            {тест: /\.jsx?$/, загрузчик: 'babel-loader? cacheDirectory', исключить: / (node_modules | bower_components) /},
            {тест: /\.scss?$/, загрузчики: ['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"},
        ]
    }
Ричард
источник
Как вы обрабатываете другой путь к шрифту? Я имею в виду, что вы импортируете scss туда, но вы не можете изменить путь к своим файлам шрифтов, например, если вам нужно изменить его для производства, а шрифты находятся в другой папке. Есть идеи? Вот что мне нужно сделать.
LordTribual
Мне еще не нужно переделывать материал для производства. Думаю, я бы просто скопировал все из своей локальной сборки и оставил пути в покое. В противном случае, возможно, посмотрите раздел вывода webpack.config.js и посмотрите, можете ли вы изменить пути. Или просто добавьте этап пост-сборки в раздел скриптов package.json .
Ричард
2
Все заработало. Я изменил путь к загрузчику, и теперь он загружает шрифты по указанному пути.
LordTribual
Вам не нужно включать scss-файл с потрясающим шрифтом в javascript. Вы все равно можете включить его в свой scss, если вы установите путь к шрифту, как предлагает user137794, а затем обновите файл webpack.config, чтобы учесть типы шрифтов, как вы предлагаете.
Dave Lancea
Какой npm вы использовали? Я использую потрясающий загрузчик шрифтов sass и безуспешно.
Winnemucca
20

Для меня сработало следующее:

$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'
}
Йогеш Агравал
источник
12

Решено изменением моих app.scss:

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

Этот способ полезен, чтобы внешние зависимости оставались неизменными и неверсированными.

Wilk
источник
2
Вы можете избежать строки 1 и использовать `! Default` в конце строки 2.
Ночью,
Жаль, что я не могу заставить этот метод работать, потому что это означало бы, что мне не приходилось менять _variables.scssфайл каждый раз, когда я перекомпилировал проект. Он не переопределяет $fa-font-pathили какие-либо другие переменные в этом отношении .. так что не уверен, как вы смогли это сделать_
jesus g_force Harris
9

Вот как это сработало для меня, уловка заключается в том, чтобы установить $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

Мухаммад
источник
1
@Muhammed Вообще-то, загружать такие веб-шрифты немного сложно. Когда вы компилируете sass в css, в соответствии с вашим способом компиляции, ваши шрифты могут не компилироваться. Вы можете скопировать папку веб-шрифтов прямо в папку public / рядом с папкой css. Таким образом, код font awesome css найдет шрифты, и вы будете в безопасности.
Mycodingproject
7

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

$fa-font-path: "../node_modules/font-awesome/fonts";
@import '~font-awesome/scss/font-awesome.scss';
ramon22
источник
6

Что сработало для меня, так это добавить 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

Превосходство Илесанми
источник
1

Для версии 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";
sdvlpr
источник
0

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';
Koudi
источник