Laravel Mix и SASS меняют каталог шрифтов

Question

Я использую Laravel 5.4 и Laravel Mix для вывода файлов SASS.

В моих определениях шрифтов я настраиваю их так, чтобы при выводе CSS он указывал на файлы, такие как public/assets/fnt/font-name/filename.ext, но процессор меняет вывод так, что вместо этого он укажет на public/fonts/filename.ext. Есть ли способ остановить его от изменения выходных путей?

Мне не имеет никакого значения, что по умолчанию это сделает что-то подобное.

Редактировать

Я видел, что по умолчанию они используют в Mix является виновником:

module.exports.module = { 
    rules: [ 
     // ... 
     { 
      test: /\.(woff2?|ttf|eot|svg|otf)$/, 
      loader: 'file-loader', 
      options: { 
       name: 'fonts/[name].[ext]?[hash]', 
       publicPath: '/' 
      } 
     } 
    ] 
}; 

Я попытался с помощью null-loader вместо file-loader, но вместо этого он заставляет его сбой, потому что он не может найти файлы в node_modules, который не там, где он должен выглядеть в первую очередь.

Удаление правила в результатах вопроса в потоке ошибок от попыток открыть и оценить файлы шрифтов в вопрос:

error in ./public/assets/fnt/fanfare-jf/fanfare-jf.ttf 

Module parse failed: DIRECTORY\public\assets\fnt\fanfare-jf\fanfare-jf.ttf Unexpected character '' (1:0) 
You may need an appropriate loader to handle this file type. 
(Source code omitted for this binary file) 

@ ./~/css-loader!./~/postcss-loader!./~/resolve-url-loader!./~/sass-loader?sourceMap&precision=8!./resources/assets/sass/app.scss 6:2525-2590 
@ ./resources/assets/sass/app.scss 
@ multi ./resources/assets/js/app.js ./resources/assets/sass/app.scss 

я могу по крайней мере, добавить emitFiles: false к options, чтобы предотвратить его изготовление копий файл, но пути все еще изменяются.

Answer 1

Вывод, который вы получили, является предполагаемым поведением из-за вашей конфигурации.

Вы используете эту конфигурацию, чтобы загрузить файл:

 options: { 
      name: 'fonts/[name].[ext]?[hash]', 
      publicPath: '/' 
     } 

Который говорит использовать publicPath в public и создать файл с именем fonts/[name].[ext]?[hash] и WebPack знает о том, что эти символы '/', '.', '?' во имя делать.

Он просто ищет каталог fonts, и если нет какого-либо каталога шрифтов, он создает новый и помещает файлы в этот каталог.

Таким образом, вы должны использовать эту конфигурацию для вашей структуры папок:

options: { 
    name: 'assets/fnt/font-name/[name].[ext]?[hash]', 
    publicPath: '/' 
} 

Это должно работать для вашей конфигурации.

Подробнее о file-loader конфигурации:

https://github.com/webpack-contrib/file-loader#filename-templates

Edit:

Поскольку Laravel Mix использует Webpack в этом фоновый и Webpack не имеет каких-либо знаний о файле шрифтов, когда нет какой-либо необходимости загрузчик добавлен в конфигурацию. Таким образом, ошибка:

Module parse failed: DIRECTORY\public\assets\fnt\fanfare-jf\fanfare-jf.ttf Unexpected character '' (1:0) 
You may need an appropriate loader to handle this file type. 

произошло.

Вам необходимо сообщить Webpack, чтобы загрузить шрифты в нужную директорию, а шрифты, связанные в вашем файле SASS, будут связаны Webpack без каких-либо дополнительных конфигураций.

Answer 2

В результате я получил следующую конфигурацию, чтобы, по крайней мере, получить ее в рабочем состоянии.

{ 
    test: /\.(woff2?|ttf|eot|svg|otf)$/, 
    loader: 'file-loader', 
    options: { 
     name: '[path][name].[ext]?[hash]', 
     publicPath: '/', 
     context: 'public', 
     emitFile: false 
    } 
}