How to build from source using Laravel Mix? #23
Comments
|
Updated the regex rules in the webpack config after looking at another somewhat similar issue. Commented out the ones I had mix.webpackConfig({
devtool: "inline-source-map",
module: {
rules: [
{
test: /ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/,
//test: /ckeditor5-[^/]+\/theme\/icons\/[^/]+\.svg$/,
use: [ 'raw-loader' ]
},
{
test: /ckeditor5-[^/\\]+[/\\]theme[/\\].+\.css/,
//test: /ckeditor5-[^/]+\/theme\/[\w-/]+\.css$/,
use: [
{
loader: 'style-loader',
options: {
singleton: true
}
},
{
loader: 'postcss-loader',
options: CKEStyles.getPostCssConfig( {
themeImporter: {
themePath: require.resolve( '@ckeditor/ckeditor5-theme-lark' )
},
minify: true
} )
},
]
}
]
},
plugins: [
new CKEditorWebpackPlugin({
language: 'en'
})
]
});error (all 9 of those errors are the same as below) |
|
The very first question is: does using the editor from source with In other words: if you copy&paste the entire guide code in a new empty project that has nothing to do with your application, does it compile and run? |
|
Building the editor from source in an empty vue project via vue-cli does work. I assume your suggestion would be to build separately and make a npm package for the custom component? side question: Is there a way to build the css separately and not as a part of the vue component where it gets injected? |
Not exactly, I wanted to first make sure your env is OK and there's nothing wrong with Is there any chance you can publish a (minimal) PoC somewhere (like a public GitHub repo) so we can debug this thing?
Like, for instance, extracting them to a separate file? |
sure thing, https://github.com/kanalumaddela/laravel-ckeditor5-vue-debug
oops, guess I was kinda focused on the primary webpack config |
|
I checked your app and I reproduced the issue. My first guess is that the CSS files are processed twice by Webpack. It happened in the past, for instance in the official react integration where we had to exclude Maybe if you figured how to exclude these CSS files in your app, things would work out. I'm not really into Laravel so I don't really know where the rest (the default) webpack config is and how it works. |
I imported the default config into the this was the code I had tried which modified the default config const defaultConfig = require('laravel-mix/setup/webpack.config');
/**
* CKE stuff
*/
const CKEStyles = require('@ckeditor/ckeditor5-dev-utils').styles;
const CKERegex = {
svg: /ckeditor5-[^/]+\/theme\/icons\/[^/]+\.svg$/,
css: /ckeditor5-[^/]+\/theme\/[\w-/]+\.css$/,
}
const CKERules = [
{
test: CKERegex['svg'],
use: [ 'raw-loader' ]
},
{
test: CKERegex['css'],
use: [
{
loader: 'style-loader',
options: {
singleton: true
}
},
{
loader: 'postcss-loader',
options: CKEStyles.getPostCssConfig( {
themeImporter: {
themePath: require.resolve('@ckeditor/ckeditor5-theme-lark')
},
minify: true
} )
},
]
}
]
// exclude CKE from generic css and svg rules
defaultConfig.module.rules = defaultConfig.module.rules.map(rule => {
for (let key in CKERegex) {
if (`test.${key}`.match(rule.test)) {
if (rule.exclude) {
if (rule.exclude instanceof Array)
rule.exclude.push(CKERegex[key]);
else
rule.exclude = [rule.exclude, CKERegex[key]];
} else
rule.exclude = CKERegex[key];
}
}
return rule;
});
defaultConfig.module.rules = defaultConfig.module.rules.concat(CKERules);
// debug purposes
console.log(defaultConfig.module.rules);
module.exports = defaultConfig;When console.log()'ng the rules, it shows the cke regex as part of the excludes, but it doesn't seem to have any effect. |
|
I tried something different with the excludes by only editing the Mix.listen('configReady', webpackConfig => {
const rules = webpackConfig.module.rules;
const targetSVG = /(\.(png|jpe?g|gif|webp)$|^((?!font).)*\.svg$)/;
const targetCSS = /\.css$/;
for (let rule of rules) {
if (rule.test.toString() === targetSVG.toString()) {
rule.exclude = /\.svg$/;
//rule.exclude = CKERegex.svg;
}
else if (rule.test.toString() === targetCSS.toString()) {
rule.exclude = CKERegex.css;
}
}
});and updating the rules like so: \\ ...
module: {
rules: [
{
test: /\.svg$/,
//test: CKERegex.svg,
use: [ 'raw-loader' ]
},
\\ ...This removed svgs from the original image rule and I then also used the "generic" svg rule instead of the ckeditor specific one. This allowed the build to work (when the Link plugin isn't included however), but I think the issue may be the regex used.
The svgs are now included, but not all the CSS required for ckeditor is there. I tried extracting, but that didn't do anything which I also assume is due to the regex. I can't match general css cause that cause more conflicts than intended (plus laravel mix errors when I do so). My guess is that the regex isn't properly matching? At the moment I don't have an issue with using the general regex for svgs, but I can't seem to write a regex that works for the ckeditor css. |
|
EDIT: See #23 (comment) for those using Font plugin(s) I don't know why I didn't try this regex sooner, but I used the regex in the react doc you linked and that worked! The regex in the react doc is different than that in the general webpack docs Final partial of \\ ...
/**
* CKE stuff
*/
const CKEditorWebpackPlugin = require( '@ckeditor/ckeditor5-dev-webpack-plugin' );
const CKEStyles = require('@ckeditor/ckeditor5-dev-utils').styles;
const CKERegex = {
svg: /ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/,
css: /ckeditor5-[^/\\]+[/\\]theme[/\\].+\.css/,
};
Mix.listen('configReady', webpackConfig => {
const rules = webpackConfig.module.rules;
const targetSVG = /(\.(png|jpe?g|gif|webp)$|^((?!font).)*\.svg$)/;
const targetCSS = /\.css$/;
// exclude CKE regex from mix's default rules
// if there's a better way to loop/change this, open to suggestions
for (let rule of rules) {
if (rule.test.toString() === targetSVG.toString()) {
rule.exclude = CKERegex.svg;
}
else if (rule.test.toString() === targetCSS.toString()) {
rule.exclude = CKERegex.css;
}
}
});
mix.webpackConfig({
plugins: [
new CKEditorWebpackPlugin({
language: 'en'
})
],
module: {
rules: [
{
test: CKERegex.svg,
use: [ 'raw-loader' ]
},
{
test: CKERegex.css,
use: [
{
loader: 'style-loader',
options: {
singleton: true
}
},
{
loader: 'postcss-loader',
options: CKEStyles.getPostCssConfig({
themeImporter: {
themePath: require.resolve('@ckeditor/ckeditor5-theme-lark')
},
minify: true
})
},
]
}
]
}
});
\\ ...Since the regex finally matches properly, I assume extracting the css out should work also, but I'll leave this issue open till I test that in a couple of mins. Extracting CSS works perfectly, closing the issue. |
|
Just another minor note for future people who come across this. When using the FontFamily and FontSize plugins, you will need to add excludes to the font related rule set by mix since the svgs contain the Mix.listen('configReady', webpackConfig => {
const rules = webpackConfig.module.rules;
const targetSVG = /(\.(png|jpe?g|gif|webp)$|^((?!font).)*\.svg$)/;
const targetFont = /(\.(woff2?|ttf|eot|otf)$|font.*\.svg$)/;
const targetCSS = /\.css$/;
// exclude CKE regex from mix's default rules
for (let rule of rules) {
if (rule.test.toString() === targetSVG.toString()) {
rule.exclude = CKERegex.svg;
}
else if (rule.test.toString() === targetFont.toString()) {
rule.exclude = CKERegex.svg;
}
else if (rule.test.toString() === targetCSS.toString()) {
rule.exclude = CKERegex.css;
}
}
}); |
|
Thank you @kanalumaddela you saved my day! I spent 3 hours trying to fix font plugin icons in webpack... Maybe edit your first solution because I missed your next comment about font plugin :) |
|
@kanalumaddela Hey! I've just tried doing exactly what you have here, but it did not work. I get an error that it can't find the .svg files: my const CKEditorWebpackPlugin = require('@ckeditor/ckeditor5-dev-webpack-plugin');
const CKEStyles = require('@ckeditor/ckeditor5-dev-utils').styles;
const CKERegex = {
svg: /ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/,
css: /ckeditor5-[^/\\]+[/\\]theme[/\\].+\.css/,
};
Mix.listen('configReady', webpackConfig => {
const rules = webpackConfig.module.rules;
const targetSVG = /(\.(png|jpe?g|gif|webp)$|^((?!font).)*\.svg$)/;
const targetFont = /(\.(woff2?|ttf|eot|otf)$|font.*\.svg$)/;
const targetCSS = /\.css$/;
// exclude CKE regex from mix's default rules
for (let rule of rules) {
if (rule.test.toString() === targetSVG.toString()) {
rule.exclude = CKERegex.svg;
}
else if (rule.test.toString() === targetFont.toString()) {
rule.exclude = CKERegex.svg;
}
else if (rule.test.toString() === targetCSS.toString()) {
rule.exclude = CKERegex.css;
}
}
});
mix.webpackConfig({
plugins: [
new CKEditorWebpackPlugin({
language: 'he',
}),
],
module: {
rules: [
{
test: CKERegex.svg,
use: ['raw-loader'],
},
{
test: CKERegex.css,
use: [
{
loader: 'style-loader',
options: {
singleton: true,
},
},
{
loader: 'postcss-loader',
options: CKEStyles.getPostCssConfig({
themeImporter: {
themePath: require.resolve('@ckeditor/ckeditor5-theme-lark'),
},
minify: true,
}),
},
],
},
],
},
});The file in which I'm building my editor: import BalloonBlockEditor from '@ckeditor/ckeditor5-editor-balloon/src/ballooneditor';
import Autoformat from '@ckeditor/ckeditor5-autoformat/src/autoformat';
import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold';
import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic';
import BlockQuote from '@ckeditor/ckeditor5-block-quote/src/blockquote';
import Heading from '@ckeditor/ckeditor5-heading/src/heading';
import Image from '@ckeditor/ckeditor5-image/src/image';
import ImageCaption from '@ckeditor/ckeditor5-image/src/imagecaption';
import ImageStyle from '@ckeditor/ckeditor5-image/src/imagestyle';
import ImageToolbar from '@ckeditor/ckeditor5-image/src/imagetoolbar';
import ImageUpload from '@ckeditor/ckeditor5-image/src/imageupload';
import Indent from '@ckeditor/ckeditor5-indent/src/indent';
import Link from '@ckeditor/ckeditor5-link/src/link';
import List from '@ckeditor/ckeditor5-list/src/list';
import MediaEmbed from '@ckeditor/ckeditor5-media-embed/src/mediaembed';
import PasteFromOffice from '@ckeditor/ckeditor5-paste-from-office/src/pastefromoffice';
import Table from '@ckeditor/ckeditor5-table/src/table';
import TableToolbar from '@ckeditor/ckeditor5-table/src/tabletoolbar';
import Strikethrough from '@ckeditor/ckeditor5-basic-styles/src/strikethrough';
import FontColor from '@ckeditor/ckeditor5-font/src/fontcolor';
import FontSize from '@ckeditor/ckeditor5-font/src/fontsize';
import Highlight from '@ckeditor/ckeditor5-highlight/src/highlight';
import HorizontalLine from '@ckeditor/ckeditor5-horizontal-line/src/horizontalline';
import RemoveFormat from '@ckeditor/ckeditor5-remove-format/src/removeformat';
import Underline from '@ckeditor/ckeditor5-basic-styles/src/underline';
import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials';
import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
import BlockToolbar from '@ckeditor/ckeditor5-ui/src/toolbar/block/blocktoolbar';
export default class Editor extends BalloonBlockEditor {}
// Plugins to include in the build.
Editor.builtinPlugins = [
Autoformat,
Bold,
Italic,
BlockQuote,
Heading,
Image,
ImageCaption,
ImageStyle,
ImageToolbar,
ImageUpload,
Indent,
Link,
List,
MediaEmbed,
PasteFromOffice,
Table,
TableToolbar,
Strikethrough,
FontColor,
FontSize,
Highlight,
HorizontalLine,
RemoveFormat,
Underline,
Essentials,
Paragraph,
BlockToolbar,
];Any idea why is this happening? Tried to debug the svg problem for a few hours now... :/ |
|
@kfirba did you install ckeditor theme? |
|
@svkmedia yea I have it all installed. Grabbed the build from their online builder. The SVG files are there but it complains about it unable to find/load the files |
|
@kfirba do you think you could provide a debug repo to replicate the issue? |
|
@kanalumaddela it turns out I was missing the It's not related to this issue, but have you managed to return custom HTML for one of your data downcasting? If so, maybe you can help me with the following: ckeditor/ckeditor5#1126 (comment) |
|
Thanks so much for the webpack config code but this doesn't seem to work with Laravels new Jetstream scaffolding (laravel 8). Probably because that implementation tries to run PostCss on the entire output (so ckeditor gets run thorugh posts css , twice?), so i get: My webpack.mix.js is exactly as @kanalumaddela provided, only it already has the Laravel Jetstream code as follows: I think i have to exclude Laravel Mix's postcss from doing anything in the node_modules/ckeditor folder but i can't get i to work. |
|
I also can't get this webpack config code to work with Laravel Mix v6.0.10 and some of the latest versions of the CKEditor packages. I get similar errors to those @aske-cph mentions such as: However I am using not Laravel Mix's PostCSS compiler directly at all. package.json "devDependencies": {
"laravel-mix": "^6.0.10",
"postcss": "^8.2.4",
},
"dependencies": {
"@ckeditor/ckeditor5-alignment": "^24.0.0",
"@ckeditor/ckeditor5-autoformat": "^24.0.0",
"@ckeditor/ckeditor5-basic-styles": "^24.0.0",
"@ckeditor/ckeditor5-block-quote": "^24.0.0",
"@ckeditor/ckeditor5-dev-utils": "^24.0.1",
"@ckeditor/ckeditor5-dev-webpack-plugin": "^24.0.1",
"@ckeditor/ckeditor5-editor-classic": "^24.0.0",
"@ckeditor/ckeditor5-essentials": "^24.0.0",
"@ckeditor/ckeditor5-heading": "^24.0.0",
"@ckeditor/ckeditor5-image": "^24.0.0",
"@ckeditor/ckeditor5-link": "^24.0.0",
"@ckeditor/ckeditor5-list": "^24.0.0",
"@ckeditor/ckeditor5-media-embed": "^24.0.0",
"@ckeditor/ckeditor5-paragraph": "^24.0.0",
"@ckeditor/ckeditor5-theme-lark": "^24.0.0",
"@ckeditor/ckeditor5-upload": "^24.0.0",
"@ckeditor/ckeditor5-word-count": "^24.0.0",
"postcss-loader": "^4.1.0",
"raw-loader": "^3.1.0",
"style-loader": "^1.2.1",
}webpack.mix.js const mix = require('laravel-mix');
const CKEditorWebpackPlugin = require('@ckeditor/ckeditor5-dev-webpack-plugin');
const { styles } = require('@ckeditor/ckeditor5-dev-utils');
const CKERegex = {
svg: /ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/,
css: /ckeditor5-[^/\\]+[/\\]theme[/\\].+\.css/,
};
Mix.listen('configReady', webpackConfig => {
const rules = webpackConfig.module.rules;
const targetSVG = /(\.(png|jpe?g|gif|webp)$|^((?!font).)*\.svg$)/;
const targetFont = /(\.(woff2?|ttf|eot|otf)$|font.*\.svg$)/;
const targetCSS = /\.css$/;
// exclude CKE regex from mix's default rules
for (let rule of rules) {
if (rule.test.toString() === targetSVG.toString()) {
rule.exclude = CKERegex.svg;
}
else if (rule.test.toString() === targetFont.toString()) {
rule.exclude = CKERegex.svg;
}
else if (rule.test.toString() === targetCSS.toString()) {
rule.exclude = CKERegex.css;
}
}
});
mix.webpackConfig({
plugins: [
new CKEditorWebpackPlugin({
language: 'en',
addMainLanguageTranslationsToAllAssets: true
})
],
module: {
rules: [
{
test: CKERegex.svg,
use: ['raw-loader']
},
{
test: CKERegex.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
})
}
]
}
]
}
});
mix.setPublicPath('public')
mix.js('src/js/app.js', 'js');/src/js/app.js import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
import Alignment from '@ckeditor/ckeditor5-alignment/src/alignment';
import Autoformat from '@ckeditor/ckeditor5-autoformat/src/autoformat';
import BlockQuote from '@ckeditor/ckeditor5-block-quote/src/blockquote';
import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold';
import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials';
import Heading from '@ckeditor/ckeditor5-heading/src/heading';
import Image from '@ckeditor/ckeditor5-image/src/image';
import ImageCaption from '@ckeditor/ckeditor5-image/src/imagecaption';
import ImageResize from '@ckeditor/ckeditor5-image/src/imageresize';
import ImageStyle from '@ckeditor/ckeditor5-image/src/imagestyle';
import ImageToolbar from '@ckeditor/ckeditor5-image/src/imagetoolbar';
import ImageUpload from '@ckeditor/ckeditor5-image/src/imageupload';
import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic';
import Link from '@ckeditor/ckeditor5-link/src/link';
import LinkImage from '@ckeditor/ckeditor5-link/src/linkimage';
import List from '@ckeditor/ckeditor5-list/src/list';
import ListStyle from '@ckeditor/ckeditor5-list/src/liststyle';
import MediaEmbed from '@ckeditor/ckeditor5-media-embed/src/mediaembed';
import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
import SimpleUploadAdapter from '@ckeditor/ckeditor5-upload/src/adapters/simpleuploadadapter';
import Strikethrough from '@ckeditor/ckeditor5-basic-styles/src/strikethrough';
import WordCount from '@ckeditor/ckeditor5-word-count/src/wordcount';
if (document.querySelector('.editor')) {
ClassicEditor.create(document.querySelector('.editor'), {
plugins: [
Alignment,
Autoformat,
BlockQuote,
Bold,
Essentials,
Heading,
Image,
ImageCaption,
ImageResize,
ImageStyle,
ImageToolbar,
ImageUpload,
Italic,
Link,
LinkImage,
List,
ListStyle,
MediaEmbed,
Paragraph,
SimpleUploadAdapter,
Strikethrough,
WordCount,
],
alignment: {
options: ['left', 'center', 'right']
},
heading: {
options: [
{ model: 'paragraph', title: 'Paragraph Text', class: 'ck-heading_paragraph' },
{ model: 'heading2', view: 'h2', title: 'Heading 1', class: 'ck-heading_heading2' },
{ model: 'heading3', view: 'h3', title: 'Heading 2', class: 'ck-heading_heading3' },
{ model: 'heading4', view: 'h4', title: 'Heading 3', class: 'ck-heading_heading4' }
]
},
image: {
toolbar: [
'imageStyle:full',
'imageStyle:side',
'|',
'imageResize:original',
'imageResize:25',
'imageResize:50',
'imageResize:75',
'|',
'imageTextAlternative'
],
upload: {
types: ['jpeg', 'png', 'gif']
},
resizeUnit: '%',
resizeOptions: [
{
name: 'imageResize:original',
value: null,
icon: 'original'
},
{
name: 'imageResize:25',
value: '25',
icon: 'small'
},
{
name: 'imageResize:50',
value: '50',
icon: 'medium'
},
{
name: 'imageResize:75',
value: '75',
icon: 'large'
}
]
},
link: {
decorators: {
openInNewTab: {
mode: 'manual',
label: 'Open in a new tab',
defaultValue: true, // This option will be selected by default.
attributes: {
target: '_blank',
rel: 'noopener noreferrer'
}
}
}
},
mediaEmbed: {
previewsInData: false,
removeProviders: [ 'instagram', 'twitter', 'googleMaps', 'flickr', 'facebook']
},
simpleUpload: {
headers: {
'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
},
uploadUrl: window.location.origin + '/img/upload/' + window.location.pathname.split('/')[2],
},
toolbar: {
items: [
'heading',
'|',
'bold',
'italic',
'strikethrough',
'blockQuote',
'|',
'alignment',
'|',
'bulletedList',
'numberedList',
'|',
'link',
'imageUpload',
'mediaEmbed',
'|',
'undo',
'redo'
]
},
language: 'en'
})
.catch( error => {
console.error( error );
});
}Additional note The CKEditor5 Docs indicate to use |
|
I have the exact same problem as @icreatestuff above except I also noticed this in the console:
This shows up in the log before it completes but I'm not sure if it's related. That said.. I was able to get this to work but I believe the problem is a bit complicated including multiple packages. The mix configReady snippet above from @kanalumaddela that has this part:
Needs to be changed to this: I'm not sure WHY exactly but this must have been a change in the new version of mix/webpack because the for loop wasn't actually excluding the CSS files anymore and when I looked at the matching rules it was I found this, mentioned here: That led me here: Which turns out the problem is because of this file: As you can see "plugins" here should be I just made the change locally to confirm it worked and.. it did. I'm not sure what to make of all this, but maybe someone else more familiar with webpack and postcss can step in from here? |
|
Thanks for posting your findings @XGhozt. I've tried working through your steps to:
loader: 'postcss-loader',
options: {
postcssOptions: styles.getPostCssConfig({
themeImporter: {
themePath: require.resolve('@ckeditor/ckeditor5-theme-lark')
},
minify: true
})
}I'm now seeing a ton of and errors such as Are you seeing the same or have you managed to get this to run successfully? I know Laravel Mix 6 requires Webpack 5 and PostCSS 8. Is anyone aware if CKEditor5s roadmap includes native support for those packages too as far as I can see it's recommended/locked to Webpack ^4. |
|
Sorry @icreatestuff -- after how much trouble it gave me I ended up just forking the main repo and compiling separately as a custom package in composer. Not as convenient but it compiles faster anyway. I didn't go any further than the above. |
|
has anybody find any solutions to this ? i get this error i am using laravel mix 6 |
|
Same issue here, still a pain to make a custom build using laravel-mix |
|
Same issue here. @MehdiAghighi, have you found any solution? |
|
bump |
|
@MehdiAghighi have the same issue , did you found a solution for that ? |
|
``@kanalumaddela , thank u for your answear , i follow what you have done in your webpack configuration, but it seems that the regex rules affect my other javascript files : so this my error log
✖ Mix ERROR in ./resources/css/leaflet.css (1:1) /var/www/html/resources/css/leaflet.css Unknown word
my webpack config looks like that : mix.options({ const CKEditorWebpackPlugin = require('@ckeditor/ckeditor5-dev-webpack-plugin'); // exclude CKE regex from mix's default rules mix.webpackConfig({ //back resources if (mix.inProduction()) { |
|
I was able to make it work. The whole system with Laravel Mix and Webpack is pretty unstable, when one thing changes your whole config breaks. You guys were missing two essential things in your config:
webpack.mix.js: const mix = require('laravel-mix');
const CKEditorWebpackPlugin = require('@ckeditor/ckeditor5-dev-webpack-plugin');
const {styles} = require('@ckeditor/ckeditor5-dev-utils');
// make sure you copy these two regexes from the CKEdidtor docs:
// https://ckeditor.com/docs/ckeditor5/latest/installation/advanced/alternative-setups/integrating-from-source.html#webpack-configuration
const CKERegex = {
svg: /ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/,
css: /ckeditor5-[^/\\]+[/\\]theme[/\\].+\.css$/,
};
Mix.listen('configReady', webpackConfig => {
const rules = webpackConfig.module.rules;
// these change often! Make sure you copy the correct regexes for your Webpack version!
const targetSVG = /(\.(png|jpe?g|gif|webp|avif)$|^((?!font).)*\.svg$)/;
const targetFont = /(\.(woff2?|ttf|eot|otf)$|font.*\.svg$)/;
const targetCSS = /\.p?css$/;
// exclude CKE regex from mix's default rules
for (let rule of rules) {
// console.log(rule.test) // uncomment to check the CURRENT rules
if (rule.test.toString() === targetSVG.toString()) {
rule.exclude = CKERegex.svg;
} else if (rule.test.toString() === targetFont.toString()) {
rule.exclude = CKERegex.svg;
} else if (rule.test.toString() === targetCSS.toString()) {
rule.exclude = CKERegex.css;
}
}
});
mix.webpackConfig({
plugins: [
new CKEditorWebpackPlugin({
language: 'en',
addMainLanguageTranslationsToAllAssets: true
})
],
module: {
rules: [
{
test: CKERegex.svg,
use: ['raw-loader']
},
{
test: CKERegex.css,
use: [
{
loader: 'style-loader',
options: {
injectType: 'singletonStyleTag',
attributes: {
'data-cke': true
}
}
},
'css-loader', // ADDED
{
loader: 'postcss-loader',
options: {
postcssOptions: styles.getPostCssConfig({ // moved into option `postcssOptions`
themeImporter: {
themePath: require.resolve('@ckeditor/ckeditor5-theme-lark')
},
minify: true
})
}
}
]
}
]
}
});
mix.setPublicPath('public')
mix.js('resources/js/app.js', 'public/js');
mix.sass('resources/css/app.scss', 'public/css', [
//
]);Versions I'm using:
|
Reinmar
added
resolution:resolved
|
After struggling 8 Hrs. webpack: https://gist.github.com/cseahosan/5acf1213e35fbe72daf4ba97df8d2b49 |
If this should be posted in the main repo, I'll do that
I'm currently trying to build CKE5 from source for vue using Laravel Mix. When I attempt to add the Link plugin, it fails because it can't seem the find a mixin, but when I remove that plugin, it'll build fine, but then error in console.
I wouldn't be surprised if there's something wrong with my setup, but I tried following the advanced setup guide in the docs as opposed to building from source vue guide since that was related to vue cli.
side question: how to include the css in my
app.cssfile during the build process?CKE5 packages installed (the build version is there when i was testing CKE before wanting to build from source)
3rd party packages (just in case there's some conflict I don't know)
webpack.mix.jsapp.jsckeditor-classic-custom.vuecomponent (link plugin is commented out cause build fails when adding it)Issue when not using the Link plugin
Build issue when using the Link plugin (boxed issues)
(I tried that
npm install --savecommand, but that didn't work)The text was updated successfully, but these errors were encountered: