Skip to content

bundling-content-css.adoc

Latest commit

 

History

History
78 lines (63 loc) · 1.79 KB

bundling-content-css.adoc

File metadata and controls

78 lines (63 loc) · 1.79 KB

Bundling {productname} content CSS using module loading

The following table shows examples of the syntax used to bundle the following content CSS file:

./skins/content/example/content.css

Example syntax for including the example content CSS in a bundle:

Module Syntax Source Example

ES6+ (Webpack/Rollup)

npm

 
import contentCSS from 'tinymce/skins/content/example/content.css';

.zip

 
import contentCSS from '../tinymce/skins/content/example/content.css';

ES6+ (Vite)

npm

 
import 'tinymce/skins/content/example/content.js';

.zip

 
import '../tinymce/skins/content/example/content.js';

Common JS

npm

 
const contentCSS = require('tinymce/skins/content/example/content.css');

.zip

 
const contentCSS = require('../tinymce/skins/content/example/content.css');
Important

The handling of content CSS files varies between bundling tools:

  • Webpack/Rollup: Import the .css file as a variable and use content_style option (e.g., content_style: contentCSS.toString()).

  • Vite: Import the .js file as a side-effect and use content_css option with a string value (e.g., content_css: 'example').

View the relevant guide for the required syntax at Bundling {productname} with a module loader.