Блог

Согласно документации к TinyMCE для загрузки файлов Webpack, следующий фрагмент будет копировать каталог скинов TinyMCE:

 require.context(
  'file?name=[path][name].[ext]amp;context=node_modules/tinymce!tinymce/skins',
  true,
  /.*/
);
  

Я поместил этот фрагмент в app/assets/javascript/tinymce.vue прямо перед моими инструкциями include для tinymce. К сожалению, я получаю следующую ошибку, выдаваемую postcss при попытке компиляции webpack:

 % rails webpacker:compile

Webpacker is installed 🎉 🍰
Using /repos/myapp/config/webpacker.yml file for setting up webpack paths
Compiling…
Compilation failed:
CssSyntaxError: /repos/myapp/js/skins/content/default/content.css:2:1: Unknown word
    at Input.error (/repos/myapp/node_modules/postcss/lib/input.js:130:16)
    at Parser.unknownWord (/repos/myapp/node_modules/postcss/lib/parser.js:563:22)
    at Parser.other (/repos/myapp/node_modules/postcss/lib/parser.js:168:12)
    at Parser.parse (/repos/myapp/node_modules/postcss/lib/parser.js:77:16)
    at parse (/repos/myapp/node_modules/postcss/lib/parse.js:17:12)
    at new LazyResult (/repos/myapp/node_modules/postcss/lib/lazy-result.js:60:16)
    at Processor.<anonymous> (/repos/myapp/node_modules/postcss/lib/processor.js:138:12)
    at Processor.process (/repos/myapp/node_modules/postcss/lib/processor.js:117:23)
    at Function.creator.process (/repos/myapp/node_modules/postcss/lib/postcss.js:148:43)
    at OptimizeCssAssetsWebpackPlugin.processCss (/repos/myapp/node_modules/optimize-css-assets-webpack-plugin/src/index.js:65:21)
    at Object.processor (/repos/myapp/node_modules/optimize-css-assets-webpack-plugin/src/index.js:11:18)
    at each (/repos/myapp/node_modules/last-call-webpack-plugin/src/index.js:150:10)
    at arrayEach (/repos/myapp/node_modules/lodash/_arrayEach.js:15:9)
    at forEach (/repos/myapp/node_modules/lodash/forEach.js:38:10)
    at OptimizeCssAssetsWebpackPlugin.process (/repos/myapp/node_modules/last-call-webpack-plugin/src/index.js:147:5)
    at compilation.hooks.optimizeChunkAssets.tapPromise.chunks (/repos/myapp/node_modules/last-call-webpack-plugin/src/index.js:178:28)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/repos/myapp/node_modules/tapable/lib/HookCodeFactory.js:32:10), <anonymous>:8:17)
    at AsyncSeriesHook.lazyCompileHook (/repos/myapp/node_modules/tapable/lib/Hook.js:154:20)
    at hooks.additionalAssets.callAsync.err (/repos/myapp/node_modules/webpack/lib/Compilation.js:1311:36)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/repos/myapp/node_modules/tapable/lib/HookCodeFactory.js:32:10), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook (/repos/myapp/node_modules/tapable/lib/Hook.js:154:20)
    at hooks.optimizeTree.callAsync.err (/repos/myapp/node_modules/webpack/lib/Compilation.js:1307:32)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/repos/myapp/node_modules/tapable/lib/HookCodeFactory.js:32:10), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook (/repos/myapp/node_modules/tapable/lib/Hook.js:154:20)
    at Compilation.seal (/repos/myapp/node_modules/webpack/lib/Compilation.js:1244:27)
    at hooks.make.callAsync.err (/repos/myapp/node_modules/webpack/lib/Compiler.js:624:17)
    at _done (eval at create (/repos/myapp/node_modules/tapable/lib/HookCodeFactory.js:32:10), <anonymous>:9:1)
    at _err1 (eval at create (/repos/myapp/node_modules/tapable/lib/HookCodeFactory.js:32:10), <anonymous>:32:22)
    at _addModuleChain (/repos/myapp/node_modules/webpack/lib/Compilation.js:1095:12)
    at processModuleDependencies.err (/repos/myapp/node_modules/webpack/lib/Compilation.js:1007:9)
    at processTicksAndRejections (internal/process/next_tick.js:74:9)
  

rails webpacker:compile компилируется в public/packs каталог, и сообщение об ошибке ссылается на каталог, который не существует. Также следует отметить, что строка 2 из /node_modules/tinymce/skins/content/default/content.css является просто частью блока комментариев в css:

 /**
 * Copyright (c) Tiny Technologies, Inc. All rights reserved.
 * Licensed under the LGPL or a commercial license.
 * For LGPL see License.txt in the project root for license information.
 * For commercial licenses see https://www.tiny.cloud/
 */
  

Я думаю, мне нужно использовать другой загрузчик (например style-loader ) для компиляции css… но я не совсем понимаю, как это сделать, используя встроенный синтаксис webpack.

Любая помощь приветствуется!

Согласно file-loader документации, я могу указать путь вывода через outputPath .

Что касается webpack style-loader , я узнал, что вы можете отключить другие загрузчики, добавив к желаемому встроенному синтаксису префикс ! .

 // copy tinymce's skins directory into public/packs
require.context(
  '!file-loader?name=[path][name].[ext]amp;context=node_modules/tinymceamp;outputPath=js!tinymce/skins',
  true,
  /.*/
);
  

У меня была такая же проблема. Это было наше исправление:

Удалить .css из вашего static_assets_extensions: списка в вашем webpacker.yml .