У меня есть 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 другой файл и использовать папку этого файла в качестве домашней, чтобы его относительные пути работали так, как ожидалось?
../../node_modules/font-awesome/fonts/fontawesome-webfont.eot
?Ответы:
Использовать
$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 .
источник
$fa-font-path: "font-awesome/fonts"
- то есть без тильды.Кажется, нет никакого способа @import файлов, которые имеют свои собственные относительные пути в SCSS \ SASS.
Поэтому вместо этого мне удалось заставить это работать:
Импортируйте файл scss \ css font-awesome в мои файлы .js или .jsx, а не в мои файлы таблиц стилей:
Добавьте это в мой файл webpack.config:
источник
Для меня сработало следующее:
$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';
Этот способ полезен, чтобы внешние зависимости оставались неизменными и неверсированными.
источник
_variables.scss
файл каждый раз, когда я перекомпилировал проект. Он не переопределяет$fa-font-path
или какие-либо другие переменные в этом отношении .. так что не уверен, как вы смогли это сделать_Вот как это сработало для меня, уловка заключается в том, чтобы установить
$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
Я уже импортировал 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
просто установите его:Полезные ссылки :
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 + 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';
источник