module Vite Adapter

[ukyo]

Visit the GitHub repository or module directory for usage instructions.

I believe there might be an issue with the module directory structure, as I'm unable to add the module.

echo vite(['assets/css/app.css', 'assets/js/app.js']);

Important Notes:

• For bug reports, feature requests, or contributions, please use the GitHub repository.
• The module is under active development, and updates may be frequent. Make sure to check the repository regularly for the latest version and improvements.

[elabx]

I know this is more of a Vite question, does anyone happen to know how to build a separate CSS file that can be used in TinyMCE or CKEdito, but in which I can reuse some of the CSS that is used on the "client facing" site, I am using LESS and it would be nice to just have buttons, headings and body font exported into the CSS file used by the text editors.

[wbmnfktr]

Add a 2nd build file that only uses parts of your CSS/less.

/
├── dist
│   ├── backend.css
│   └── frontend.css
└── src
    ├── _index-backend.less
    ├── _index-frontend.less
    └── less
        ├── blocks.less
        ├── buttons.less
        └── ...

In the build file you only import those parts you need/want in the backend or WYSIWYG editor, while the frontend will have everything.

// _index-backend.less
// we only need the buttons in the backend
@import "buttons.less";

That's how I structured my .less/.sass/.scss files.

[ukyo]

@elabx There are several methods to use Vite or Alternatives with ProcessWire. @wbmnfktr's suggestion is one of them. You can make certain checks in your vite.config.js file and implement this within your config file as well. You can send extra parameters and check these parameters in your config file to perform operations accordingly, for example: npm run build --my-parameter=tinymce.

You can also use Dotenv and create multiple environment files like .env-tinymce, .env-frontend, .env-another-style, and then pass a parameter to your build script: npm run build --env=tinymce. After that, you can do what you want inside your vite.config.js file.

When you install this module you will have simple vite setup under site/templates directory. There is an .env file, we use this file for live reloading.example .env file also you can use it for your needs.