Копирование каталога скинов с помощью веб-пакета - PullRequest
Новая
       6

Копирование каталога скинов с помощью веб-пакета

0 голосов
/ 04 марта 2019

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

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

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

% 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.

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

Ответы [ 2 ]

0 голосов
/ 19 июня 2019

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

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

0 голосов
/ 30 мая 2019

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

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

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