How to compile without MiniCssExtractPlugin?

[archasek]

Hey, thanks for a cool boilerplate!

I'm using CKEditor (which brings some 3rd party css) and I have some css conflicts in module rules in webpack config.

When I have MiniCssExtractPlugin turned on (like in boilerplate's webpack cfg), then project's styles work ok but browser default/CKEditor styling doesn't work:
(Test should be styled, but it's not. <input> at the bottom is ok)

When I turn off MiniCssExtractPlugin, then my project styles are not loaded, but browser default styles work well (CKEditor styles don't though):
(Test is styled, <input> is not)

Here's the webpack config (module part) - the difference between 2 cases is only in commenting one line (// MiniCssExtractPlugin.loader,):

  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
              }
            }
          },
          'css-loader',
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: styles.getPostCssConfig({
                themeImporter: {
                  themePath: require.resolve('@ckeditor/ckeditor5-theme-lark')
                },
                minify: true
              })
            }
          },
        ]
      },
      {
        test: /\.ts$/,
        use: "ts-loader",
        exclude: /node_modules/
      },
      {
        test: /\.((c|sa|sc)ss)$/i,
        use: [
          // MiniCssExtractPlugin.loader,
          'css-loader',
          'postcss-loader',
          'sass-loader'
        ],
        exclude: /ckeditor5-[^/\\]+[/\\]theme[/\\].+\.css$/,
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: ['babel-loader'],
      },
      {
        test: /\.(png|gif|jpe?g|svg)$/i,
        type: 'asset',
        parser: {
          dataUrlCondition: {
            maxSize: environment.limits.images,
          },
        },
        generator: {
          filename: 'images/design/[name].[hash:6][ext]',
        },
        exclude: /ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/,
      },
      {
        test: /\.(eot|ttf|woff|woff2)$/,
        type: 'asset',
        parser: {
          dataUrlCondition: {
            maxSize: environment.limits.images,
          },
        },
        generator: {
          filename: 'images/design/[name].[hash:6][ext]',
        },
      },
    ],
  },

Any ideas? As a last resort i would just like to disable the MiniCssExtractPlugin and have the styles work if there is no other good idea

Cheers

[archasek]

@pnikolov perhaps you have an idea? 🙏

To put the question differently, how to make it work with the boilerplate? https://ckeditor.com/docs/ckeditor5/latest/installation/getting-started/quick-start-other.html#building-the-editor-from-source

[pnikolov]

@archasek I have reproduced the reported behaviour and it is not due to the MiniCssExtractPlugin loader plugin.

You "loose" your CKEditor styling because this boilerplate ships with CSS Reset styles - they reset all default browser styling to help you write styles that will be consisted in all browsers as each browser applies some default styling which is different for each browser.

So in short, you can comment/remove this line in the app.scss on line 6:

/* CSS Reset */
@import 'base/reset';

Removing the above will not include the src/scss/base/_reset.scss file that resets all default styling (strong, italics, headings, etc.)

Here is a screenshot of the enabled default styling after commenting the @import base/reset directive:

Anyhow doing this you will need to be cautious about the default browser styling.
The recommended way is to keep the default browser reset styles and then add the default styling applied only for the CK editor wrapper. this means you need to provide all styling rules for each of the plugins which is a lot of work in general, but this way you will have full control on what is being visualised. e.g

.ck-editor .ck-content { 
  strong { font-weight: bold; }
  i { font-style: italic; }
  ...
}

[archasek]

Thank you very much sir! 🎸