无法加载通过 ember-auto-import 导入 css 的模块
Can't load module that imports css via ember-auto-import
我正在尝试构建一个 ember 3.25 应用程序,它通过 ember-auto-import
导入 CkEditor
通过将以下内容添加到我的 package.json
,我能够让编辑器正常工作:
"@ckeditor/ckeditor5-build-classic": "^27.0.0",
并将以下内容添加到我的 ember 组件中:
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
...
didInsertElement() {
var editor = ClassicEditor
.create( document.querySelector( '#editor' ), {
...
});
}
但是当我尝试通过以下方式添加 ImageResize
模块时:
"@ckeditor/ckeditor5-image": "^27.0.0",
在我的组件中 (as instructed here):
import Image from '@ckeditor/ckeditor5-image/src/image';
import ImageResize from '@ckeditor/ckeditor5-image/src/image-resize';
我最初看到的错误是:'UnhandledPromiseRejectionWarning: Error: webpack returned errors to ember-auto-import
所以我 运行 AUTO_IMPORT_VERBOSE=true ember serve
我现在看到 ckeditor 无法 @import
嵌套的错误 .css
:
ERROR in ./node_modules/@ckeditor/ckeditor5-ui/theme/components/toolbar/toolbar.css 6:0
Module parse failed: Unexpected character '@' (6:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| */
|
> @import "../../mixins/_unselectable.css";
或者使用 ES6 语法:
ERROR in ./node_modules/@ckeditor/ckeditor5-ui/theme/components/dropdown/toolbardropdown.css 6:0
Module parse failed: Unexpected token (6:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| */
|
> :root {
以及尝试包含 svg 文件时的错误:
ERROR in ./node_modules/@ckeditor/ckeditor5-widget/theme/icons/drag-handle.svg 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> <svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M4 0v1H1v3H0V.5A.5.5 0 0 1 .5 0H4zm8 0h3.5a.5.5 0 0 1 .5.5V4h-1V1h-3V0zM4 16H.5a.5.5 0 0 1-.5-.5V12h1v3h3v1zm8 0v-1h3v-3h1v3.5a.5.5 0
0 1-.5.5H12z"/><path fill-opacity=".256" d="M1 1h14v14H1z"/><g class="ck-icon__selected-indicator"><path d="M7 0h2v1H7V0zM0 7h1v2H0V7zm15 0h1v2h-1V7zm-8 8h2v1H7v-1z"/><path fill-opacity=".254" d="M1 1h14
v14H1z"/></g></svg>
基于此消息:
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
看来我需要向 ember 添加一些 webpack 加载程序,但我真的不确定该怎么做。有人可以帮忙吗?
@ckeditor/ckeditor5-image/src/image
imports a CSS file. As CKEditor uses CSS-in-JS and other features not part of ECMAScript specification you need to configure webpack to support it. CKEditor's documentation includes a minimal configuration example:
const CKEditorWebpackPlugin = require("@ckeditor/ckeditor5-dev-webpack-plugin");
const { styles } = require("@ckeditor/ckeditor5-dev-utils");
module.exports = {
plugins: [
// ...
new CKEditorWebpackPlugin({
// See https://ckeditor.com/docs/ckeditor5/latest/features/ui-language.html
language: "pl",
}),
],
module: {
rules: [
{
test: /ckeditor5-[^/\]+[/\]theme[/\]icons[/\][^/\]+\.svg$/,
use: ["raw-loader"],
},
{
test: /ckeditor5-[^/\]+[/\]theme[/\].+\.css$/,
use: [
{
loader: "style-loader",
options: {
injectType: "singletonStyleTag",
attributes: {
"data-cke": true,
},
},
},
{
loader: "postcss-loader",
options: styles.getPostCssConfig({
themeImporter: {
themePath: require.resolve("@ckeditor/ckeditor5-theme-lark"),
},
minify: true,
}),
},
],
},
],
},
};
Ember 自动导入允许您提供自定义 webpack 配置作为 autoImport.webpack
配置键:
// ember-cli-build.js
let app = new EmberApp(defaults, {
autoImport: {
webpack: {
// extra webpack configuration goes here
},
},
});
请联系 Ember Auto Import's documentation 了解详情。
像这样将两者放在一起应该有效:
// ember-cli-build.js
const CKEditorWebpackPlugin = require('@ckeditor/ckeditor5-dev-webpack-plugin');
const { styles } = require('@ckeditor/ckeditor5-dev-utils');
let app = new EmberApp(defaults, {
autoImport: {
webpack: {
plugins: [
new CKEditorWebpackPlugin({
// See https://ckeditor.com/docs/ckeditor5/latest/features/ui-language.html
language: "pl",
}),
],
module: {
rules: [
{
test: /ckeditor5-[^/\]+[/\]theme[/\]icons[/\][^/\]+\.svg$/,
use: ["raw-loader"],
},
{
test: /ckeditor5-[^/\]+[/\]theme[/\].+\.css$/,
use: [
{
loader: "style-loader",
options: {
injectType: "singletonStyleTag",
attributes: {
"data-cke": true,
},
},
},
{
loader: "postcss-loader",
options: styles.getPostCssConfig({
themeImporter: {
themePath: require.resolve(
"@ckeditor/ckeditor5-theme-lark"
),
},
minify: true,
}),
},
],
},
],
},
},
},
});
更新
这个解决方案几乎有效,但有几点需要注意:
正在从“@ckeditor/ckeditor5-image/src/image-resize”导入 ImageResize
; '@ckeditor/ckeditor5-build-classic' 中的 ClassicEditor
并没有起作用!显然这会导致重复模块错误。
因此,请按照有关如何 build from source after doing that, I found that the ckeditor styling was not loading in ember until I followed the instructions on extracting CSS 的说明进行操作,然后一切正常!
以下是我的 package.json
:
的相关文章
"@ckeditor/ckeditor5-adapter-ckfinder": "^27.0.0",
"@ckeditor/ckeditor5-autoformat": "^27.0.0",
"@ckeditor/ckeditor5-basic-styles": "^27.0.0",
"@ckeditor/ckeditor5-block-quote": "^27.0.0",
"@ckeditor/ckeditor5-ckfinder": "^27.0.0",
"@ckeditor/ckeditor5-cloud-services": "^27.0.0",
"@ckeditor/ckeditor5-core": "^27.0.0",
"@ckeditor/ckeditor5-dev-utils": "^24.0.0",
"@ckeditor/ckeditor5-dev-webpack-plugin": "^24.4.2",
"@ckeditor/ckeditor5-easy-image": "^27.0.0",
"@ckeditor/ckeditor5-editor-classic": "^27.0.0",
"@ckeditor/ckeditor5-essentials": "^27.0.0",
"@ckeditor/ckeditor5-heading": "^27.0.0",
"@ckeditor/ckeditor5-image": "^27.0.0",
"@ckeditor/ckeditor5-indent": "^27.0.0",
"@ckeditor/ckeditor5-link": "^27.0.0",
"@ckeditor/ckeditor5-list": "^27.0.0",
"@ckeditor/ckeditor5-media-embed": "^27.0.0",
"@ckeditor/ckeditor5-paragraph": "^27.0.0",
"@ckeditor/ckeditor5-paste-from-office": "^27.0.0",
"@ckeditor/ckeditor5-table": "^27.0.0",
"@ckeditor/ckeditor5-theme-lark": "^27.0.0",
"@ckeditor/ckeditor5-typing": "^27.0.0",
"css-loader": "^5.2.2",
"mini-css-extract-plugin": "^1.5.0",
"postcss-loader": "^3.0.0",
"raw-loader": "^3.1.0",
"style-loader": "^2.0.0"
还有我的 ember-cli-build.js 文件:
const CKEditorWebpackPlugin = require("@ckeditor/ckeditor5-dev-webpack-plugin");
const { styles } = require("@ckeditor/ckeditor5-dev-utils");
const MiniCssExtractPlugin = require( 'mini-css-extract-plugin' );
module.exports = function (defaults) {
let app = new EmberApp(defaults, {
cssModules: {
includeExtensionInModulePath: true,
},
sassOptions: {
inputFiles: [
'/app/styles/app.scss',
],
includePaths: ['app', 'app/components']
},
// Add options here
autoImport: {
webpack: {
plugins: [
new CKEditorWebpackPlugin({
// See https://ckeditor.com/docs/ckeditor5/latest/features/ui-language.html
// language: "en",
}),
new MiniCssExtractPlugin( {
filename: 'ckeditor.css'
} )
],
module: {
rules: [
{
test: /ckeditor5-[^/\]+[/\]theme[/\]icons[/\][^/\]+\.svg$/,
use: ["raw-loader"],
},
{
test: /ckeditor5-[^/\]+[/\]theme[/\].+\.css$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
{
loader: "postcss-loader",
options: styles.getPostCssConfig({
themeImporter: {
themePath: require.resolve(
"@ckeditor/ckeditor5-theme-lark"
),
},
minify: true,
}),
},
],
},
],
},
},
},
});
return app.toTree();
};
还有我的 ck-editor.js 文件(我将其保存在与我的组件相同的目录中):
import ClassicEditorBase from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
import EssentialsPlugin from '@ckeditor/ckeditor5-essentials/src/essentials';
import UploadAdapterPlugin from '@ckeditor/ckeditor5-adapter-ckfinder/src/uploadadapter';
import AutoformatPlugin from '@ckeditor/ckeditor5-autoformat/src/autoformat';
import BoldPlugin from '@ckeditor/ckeditor5-basic-styles/src/bold';
import ItalicPlugin from '@ckeditor/ckeditor5-basic-styles/src/italic';
import BlockQuotePlugin from '@ckeditor/ckeditor5-block-quote/src/blockquote';
// import EasyImagePlugin from '@ckeditor/ckeditor5-easy-image/src/easyimage';
import HeadingPlugin from '@ckeditor/ckeditor5-heading/src/heading';
import ImagePlugin from '@ckeditor/ckeditor5-image/src/image';
import ImageCaptionPlugin from '@ckeditor/ckeditor5-image/src/imagecaption';
import ImageStylePlugin from '@ckeditor/ckeditor5-image/src/imagestyle';
import ImageToolbarPlugin from '@ckeditor/ckeditor5-image/src/imagetoolbar';
import ImageUploadPlugin from '@ckeditor/ckeditor5-image/src/imageupload';
import LinkPlugin from '@ckeditor/ckeditor5-link/src/link';
import ListPlugin from '@ckeditor/ckeditor5-list/src/list';
import ParagraphPlugin from '@ckeditor/ckeditor5-paragraph/src/paragraph';
import ImageResize from '@ckeditor/ckeditor5-image/src/imageresize';
export default class ClassicEditor extends ClassicEditorBase {}
ClassicEditor.builtinPlugins = [
EssentialsPlugin,
UploadAdapterPlugin,
AutoformatPlugin,
BoldPlugin,
ItalicPlugin,
BlockQuotePlugin,
// EasyImagePlugin,
HeadingPlugin,
ImagePlugin,
ImageCaptionPlugin,
ImageStylePlugin,
ImageToolbarPlugin,
ImageUploadPlugin,
ImageResize,
LinkPlugin,
ListPlugin,
ParagraphPlugin
];
ClassicEditor.defaultConfig = {
toolbar: {
items: [
'heading',
'|',
'bold',
'italic',
'link',
'bulletedList',
'numberedList',
'uploadImage',
'blockQuote',
'undo',
'redo'
]
},
image: {
toolbar: [
'imageStyle:full',
'imageStyle:side',
'|',
'imageTextAlternative'
]
},
language: 'en'
};
现在,从我的组件中,我可以调用:
import ClassicEditor from './ck-editor';
...
didInsertElement() {
var editor = ClassicEditor
.create( document.querySelector( '#editor' ), {
...
});
}
我正在尝试构建一个 ember 3.25 应用程序,它通过 ember-auto-import
CkEditor
通过将以下内容添加到我的 package.json
,我能够让编辑器正常工作:
"@ckeditor/ckeditor5-build-classic": "^27.0.0",
并将以下内容添加到我的 ember 组件中:
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
...
didInsertElement() {
var editor = ClassicEditor
.create( document.querySelector( '#editor' ), {
...
});
}
但是当我尝试通过以下方式添加 ImageResize
模块时:
"@ckeditor/ckeditor5-image": "^27.0.0",
在我的组件中 (as instructed here):
import Image from '@ckeditor/ckeditor5-image/src/image';
import ImageResize from '@ckeditor/ckeditor5-image/src/image-resize';
我最初看到的错误是:'UnhandledPromiseRejectionWarning: Error: webpack returned errors to ember-auto-import
所以我 运行 AUTO_IMPORT_VERBOSE=true ember serve
我现在看到 ckeditor 无法 @import
嵌套的错误 .css
:
ERROR in ./node_modules/@ckeditor/ckeditor5-ui/theme/components/toolbar/toolbar.css 6:0
Module parse failed: Unexpected character '@' (6:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| */
|
> @import "../../mixins/_unselectable.css";
或者使用 ES6 语法:
ERROR in ./node_modules/@ckeditor/ckeditor5-ui/theme/components/dropdown/toolbardropdown.css 6:0
Module parse failed: Unexpected token (6:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| */
|
> :root {
以及尝试包含 svg 文件时的错误:
ERROR in ./node_modules/@ckeditor/ckeditor5-widget/theme/icons/drag-handle.svg 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> <svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M4 0v1H1v3H0V.5A.5.5 0 0 1 .5 0H4zm8 0h3.5a.5.5 0 0 1 .5.5V4h-1V1h-3V0zM4 16H.5a.5.5 0 0 1-.5-.5V12h1v3h3v1zm8 0v-1h3v-3h1v3.5a.5.5 0
0 1-.5.5H12z"/><path fill-opacity=".256" d="M1 1h14v14H1z"/><g class="ck-icon__selected-indicator"><path d="M7 0h2v1H7V0zM0 7h1v2H0V7zm15 0h1v2h-1V7zm-8 8h2v1H7v-1z"/><path fill-opacity=".254" d="M1 1h14
v14H1z"/></g></svg>
基于此消息:
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
看来我需要向 ember 添加一些 webpack 加载程序,但我真的不确定该怎么做。有人可以帮忙吗?
@ckeditor/ckeditor5-image/src/image
imports a CSS file. As CKEditor uses CSS-in-JS and other features not part of ECMAScript specification you need to configure webpack to support it. CKEditor's documentation includes a minimal configuration example:
const CKEditorWebpackPlugin = require("@ckeditor/ckeditor5-dev-webpack-plugin");
const { styles } = require("@ckeditor/ckeditor5-dev-utils");
module.exports = {
plugins: [
// ...
new CKEditorWebpackPlugin({
// See https://ckeditor.com/docs/ckeditor5/latest/features/ui-language.html
language: "pl",
}),
],
module: {
rules: [
{
test: /ckeditor5-[^/\]+[/\]theme[/\]icons[/\][^/\]+\.svg$/,
use: ["raw-loader"],
},
{
test: /ckeditor5-[^/\]+[/\]theme[/\].+\.css$/,
use: [
{
loader: "style-loader",
options: {
injectType: "singletonStyleTag",
attributes: {
"data-cke": true,
},
},
},
{
loader: "postcss-loader",
options: styles.getPostCssConfig({
themeImporter: {
themePath: require.resolve("@ckeditor/ckeditor5-theme-lark"),
},
minify: true,
}),
},
],
},
],
},
};
Ember 自动导入允许您提供自定义 webpack 配置作为 autoImport.webpack
配置键:
// ember-cli-build.js
let app = new EmberApp(defaults, {
autoImport: {
webpack: {
// extra webpack configuration goes here
},
},
});
请联系 Ember Auto Import's documentation 了解详情。
像这样将两者放在一起应该有效:
// ember-cli-build.js
const CKEditorWebpackPlugin = require('@ckeditor/ckeditor5-dev-webpack-plugin');
const { styles } = require('@ckeditor/ckeditor5-dev-utils');
let app = new EmberApp(defaults, {
autoImport: {
webpack: {
plugins: [
new CKEditorWebpackPlugin({
// See https://ckeditor.com/docs/ckeditor5/latest/features/ui-language.html
language: "pl",
}),
],
module: {
rules: [
{
test: /ckeditor5-[^/\]+[/\]theme[/\]icons[/\][^/\]+\.svg$/,
use: ["raw-loader"],
},
{
test: /ckeditor5-[^/\]+[/\]theme[/\].+\.css$/,
use: [
{
loader: "style-loader",
options: {
injectType: "singletonStyleTag",
attributes: {
"data-cke": true,
},
},
},
{
loader: "postcss-loader",
options: styles.getPostCssConfig({
themeImporter: {
themePath: require.resolve(
"@ckeditor/ckeditor5-theme-lark"
),
},
minify: true,
}),
},
],
},
],
},
},
},
});
更新
这个解决方案几乎有效,但有几点需要注意:
正在从“@ckeditor/ckeditor5-image/src/image-resize”导入 ImageResize
; '@ckeditor/ckeditor5-build-classic' 中的 ClassicEditor
并没有起作用!显然这会导致重复模块错误。
因此,请按照有关如何 build from source after doing that, I found that the ckeditor styling was not loading in ember until I followed the instructions on extracting CSS 的说明进行操作,然后一切正常!
以下是我的 package.json
:
"@ckeditor/ckeditor5-adapter-ckfinder": "^27.0.0",
"@ckeditor/ckeditor5-autoformat": "^27.0.0",
"@ckeditor/ckeditor5-basic-styles": "^27.0.0",
"@ckeditor/ckeditor5-block-quote": "^27.0.0",
"@ckeditor/ckeditor5-ckfinder": "^27.0.0",
"@ckeditor/ckeditor5-cloud-services": "^27.0.0",
"@ckeditor/ckeditor5-core": "^27.0.0",
"@ckeditor/ckeditor5-dev-utils": "^24.0.0",
"@ckeditor/ckeditor5-dev-webpack-plugin": "^24.4.2",
"@ckeditor/ckeditor5-easy-image": "^27.0.0",
"@ckeditor/ckeditor5-editor-classic": "^27.0.0",
"@ckeditor/ckeditor5-essentials": "^27.0.0",
"@ckeditor/ckeditor5-heading": "^27.0.0",
"@ckeditor/ckeditor5-image": "^27.0.0",
"@ckeditor/ckeditor5-indent": "^27.0.0",
"@ckeditor/ckeditor5-link": "^27.0.0",
"@ckeditor/ckeditor5-list": "^27.0.0",
"@ckeditor/ckeditor5-media-embed": "^27.0.0",
"@ckeditor/ckeditor5-paragraph": "^27.0.0",
"@ckeditor/ckeditor5-paste-from-office": "^27.0.0",
"@ckeditor/ckeditor5-table": "^27.0.0",
"@ckeditor/ckeditor5-theme-lark": "^27.0.0",
"@ckeditor/ckeditor5-typing": "^27.0.0",
"css-loader": "^5.2.2",
"mini-css-extract-plugin": "^1.5.0",
"postcss-loader": "^3.0.0",
"raw-loader": "^3.1.0",
"style-loader": "^2.0.0"
还有我的 ember-cli-build.js 文件:
const CKEditorWebpackPlugin = require("@ckeditor/ckeditor5-dev-webpack-plugin");
const { styles } = require("@ckeditor/ckeditor5-dev-utils");
const MiniCssExtractPlugin = require( 'mini-css-extract-plugin' );
module.exports = function (defaults) {
let app = new EmberApp(defaults, {
cssModules: {
includeExtensionInModulePath: true,
},
sassOptions: {
inputFiles: [
'/app/styles/app.scss',
],
includePaths: ['app', 'app/components']
},
// Add options here
autoImport: {
webpack: {
plugins: [
new CKEditorWebpackPlugin({
// See https://ckeditor.com/docs/ckeditor5/latest/features/ui-language.html
// language: "en",
}),
new MiniCssExtractPlugin( {
filename: 'ckeditor.css'
} )
],
module: {
rules: [
{
test: /ckeditor5-[^/\]+[/\]theme[/\]icons[/\][^/\]+\.svg$/,
use: ["raw-loader"],
},
{
test: /ckeditor5-[^/\]+[/\]theme[/\].+\.css$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
{
loader: "postcss-loader",
options: styles.getPostCssConfig({
themeImporter: {
themePath: require.resolve(
"@ckeditor/ckeditor5-theme-lark"
),
},
minify: true,
}),
},
],
},
],
},
},
},
});
return app.toTree();
};
还有我的 ck-editor.js 文件(我将其保存在与我的组件相同的目录中):
import ClassicEditorBase from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
import EssentialsPlugin from '@ckeditor/ckeditor5-essentials/src/essentials';
import UploadAdapterPlugin from '@ckeditor/ckeditor5-adapter-ckfinder/src/uploadadapter';
import AutoformatPlugin from '@ckeditor/ckeditor5-autoformat/src/autoformat';
import BoldPlugin from '@ckeditor/ckeditor5-basic-styles/src/bold';
import ItalicPlugin from '@ckeditor/ckeditor5-basic-styles/src/italic';
import BlockQuotePlugin from '@ckeditor/ckeditor5-block-quote/src/blockquote';
// import EasyImagePlugin from '@ckeditor/ckeditor5-easy-image/src/easyimage';
import HeadingPlugin from '@ckeditor/ckeditor5-heading/src/heading';
import ImagePlugin from '@ckeditor/ckeditor5-image/src/image';
import ImageCaptionPlugin from '@ckeditor/ckeditor5-image/src/imagecaption';
import ImageStylePlugin from '@ckeditor/ckeditor5-image/src/imagestyle';
import ImageToolbarPlugin from '@ckeditor/ckeditor5-image/src/imagetoolbar';
import ImageUploadPlugin from '@ckeditor/ckeditor5-image/src/imageupload';
import LinkPlugin from '@ckeditor/ckeditor5-link/src/link';
import ListPlugin from '@ckeditor/ckeditor5-list/src/list';
import ParagraphPlugin from '@ckeditor/ckeditor5-paragraph/src/paragraph';
import ImageResize from '@ckeditor/ckeditor5-image/src/imageresize';
export default class ClassicEditor extends ClassicEditorBase {}
ClassicEditor.builtinPlugins = [
EssentialsPlugin,
UploadAdapterPlugin,
AutoformatPlugin,
BoldPlugin,
ItalicPlugin,
BlockQuotePlugin,
// EasyImagePlugin,
HeadingPlugin,
ImagePlugin,
ImageCaptionPlugin,
ImageStylePlugin,
ImageToolbarPlugin,
ImageUploadPlugin,
ImageResize,
LinkPlugin,
ListPlugin,
ParagraphPlugin
];
ClassicEditor.defaultConfig = {
toolbar: {
items: [
'heading',
'|',
'bold',
'italic',
'link',
'bulletedList',
'numberedList',
'uploadImage',
'blockQuote',
'undo',
'redo'
]
},
image: {
toolbar: [
'imageStyle:full',
'imageStyle:side',
'|',
'imageTextAlternative'
]
},
language: 'en'
};
现在,从我的组件中,我可以调用:
import ClassicEditor from './ck-editor';
...
didInsertElement() {
var editor = ClassicEditor
.create( document.querySelector( '#editor' ), {
...
});
}