时间戳

首页 > 解决方案 > 使用 webpack 复制 tinymce 皮肤的目录

vue.js - 使用 webpack 复制 tinymce 皮肤的目录

问题描述

根据 TinyMce 的Webpack 文件加载器文档，以下代码段将复制 TinyMce 的皮肤目录：

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

我将这个片段放在app/assets/javascript/tinymce.vue了 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 的内联语法来做到这一点。

任何帮助表示赞赏！

标签： vue.jswebpackwebpacker

解决方案

根据file-loader的文档，我可以通过outputPath.

至于 webpack 的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,
  /.*/
);

推荐阅读