Symfony Webpack - использование пользовательских шрифтов из подкаталога

У меня проблема с компиляцией файлов sass с пользовательскими файлами шрифтов.

Вот как выглядит моя структура каталогов:

Содержимое файла app.scss:

@import '../../../libraries/SymfonyBundle/assets/css/helper';

Содержимое файла helper.scss:

@import "helpers/grid";
@import "helpers/colors";
@import "helpers/fonts";

содержимое файла fonts.scss:

@font-face {
    font-family: "custom-font";
    src: url("../../fonts/custom-font.eot");
    font-weight: normal;
    font-style: normal;
}

Расположение файлов пользовательских пакетов:

/var/www/libraries/SymfonyBundle/assets/font/custom-font.eot

/var/www/libraries/SymfonyBundle/assets/css/helper.scss

/var/www/libraries/SymfonyBundle/assets/css/helpers/fonts.scss

Какой URL я должен предоставить? Я пробовал ../../../../libraries/SymfonyBundle/assets/fonts/custom-font.eot (относительно каталога сборки веб-сайта), ../../fonts/custom-font.eot (относительно scss-файла библиотеки).

Но я все еще получаю эту ошибку при выполнении команды yarn run encore dev:

This relative module was not found:

* ../../../../libraries/SymfonyBundle/assets/font/custom-font.eot in ./node_modules/css-loader??ref--4-2!./node_modules/sass-loader/lib/loader.js??ref--4-3!./assets/css/app.scss`

webpack.config.js

var Encore = require('@symfony/webpack-encore');

Encore
    // the project directory where compiled assets will be stored
    .setOutputPath('public/build/')
    // the public path used by the web server to access the previous 
directory
    .setPublicPath('/build')
    .cleanupOutputBeforeBuild()
    .enableSourceMaps(!Encore.isProduction())
    // uncomment to create hashed filenames (e.g. app.abc123.css)
    .enableVersioning(Encore.isProduction())

    // uncomment to define the assets of the project
    .addEntry('js/app', './assets/js/app.js')
    .addStyleEntry('css/app', './assets/css/app.scss')

    // uncomment if you use Sass/SCSS files
    .enableSassLoader(function(sassOptions) {}, {
             resolveUrlLoader: false
    })

   // uncomment for legacy applications that require $/jQuery as a global 
variable
    .autoProvidejQuery()
;

module.exports = Encore.getWebpackConfig();
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
CSS: FlexBox
CSS: FlexBox
Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.
0
0
1 556
1

Ответы 1

Каждый раз, когда вы запускаете Encore, в вашем каталоге outputPath автоматически создается файл manifest.json. Проверьте свои пути в этом файле. Особенно косые черты: и значение setOutputPath: ./build/ vs / buld vs build.

Может быть сложно, если ваш Symfony тоже находится в подкаталоге (например, http: //dev.local/my-symfony-app/). Смотрите: этот абзац в Официальный FAQ по Symfony

Другие вопросы по теме