Question

根据TinyMce的Webpack file-loader文档，以下代码段将复制TinyMce的外观目录：

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

我将这个代码段放到app/assets/javascript/tinymce.vue中，恰好在我的tinymce包含语句之前。不幸的是，当我尝试通过webpack进行编译时，收到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目录，并且错误消息引用的目录不存在。还要注意，/node_modules/tinymce/skins/content/default/content.css的第2行只是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的内联语法来做到这一点。

感谢您的帮助！

Answer 1

我有同样的问题。这是我们的解决方法：

从.css的{{1}}列表中删除static_assets_extensions:。

Answer 2

根据file-loader的文档，我可以通过outputPath指定输出路径。

对于webpack的style-loader，我了解到您可以通过在所需的inline syntax前面加上!来禁用其他加载程序。

// 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,
  /.*/
);

使用Webpack复制tinymce skin的目录

2 个答案: