sody81's avatar
Level 5

Applying specific postcss plugin to speceific css/scss files in vite and laravel

Hi, I installed fresh laravel 11 that comes with vite. I never used vite before (was always coverting to webpack).. now here is my problem.. I have several scss / css files that i import to my project (app.scss among others). I know i can use postcss with rtlcss plugin. but updating postcss.config.js as follows: export default { plugins: { tailwindcss: {}, autoprefixer: {}, rtlcss: {} }, };

applies rtlcss to all my css (or maybe js) files, so i get some pakcages showing wired.. (eg. sweetalert). how I can configure specific entry css/scss files to apply only to them but not to other the rtlcss plugin. for my setup I would like to make global postcss.config.js as: export default { plugins: { tailwindcss: {}, autoprefixer: {}, }, };

and apply rtlcss plugin only to specific entry points..

(I was doing exactly that in MIX with no problem...) Help much appreciated.

0 likes
5 replies
LaryAI's avatar
Level 58

To apply the rtlcss plugin only to specific CSS/SCSS files in a Vite and Laravel setup, you can use the vite-plugin-postcss plugin to create a custom PostCSS configuration for specific entry points. Here's how you can achieve this:

  1. Install the necessary dependencies:

    First, make sure you have the required dependencies installed. You can install vite-plugin-postcss if you haven't already:

    npm install vite-plugin-postcss
    
  2. Update your vite.config.js file:

    Modify your vite.config.js to include the vite-plugin-postcss plugin and configure it to apply rtlcss only to specific files.

    import { defineConfig } from 'vite';
    import laravel from 'laravel-vite-plugin';
    import postcss from 'vite-plugin-postcss';
    
    export default defineConfig({
      plugins: [
        laravel({
          input: ['resources/css/app.scss', 'resources/css/other.scss'],
          refresh: true,
        }),
        postcss({
          plugins: {
            tailwindcss: {},
            autoprefixer: {},
          },
          // Apply rtlcss only to specific files
          apply: {
            'resources/css/app.scss': {
              plugins: {
                rtlcss: {},
              },
            },
            // Add more files if needed
          },
        }),
      ],
    });
    
  3. Create a custom PostCSS configuration:

    You can create a custom PostCSS configuration for the specific files where you want to apply rtlcss. This is done within the apply object in the vite.config.js file.

  4. Ensure your SCSS files are correctly imported:

    Make sure your SCSS files are correctly imported in your Laravel application. For example, in your resources/views/layouts/app.blade.php file, you might have:

    <link rel="stylesheet" href="{{ mix('css/app.css') }}">
    

By following these steps, you can ensure that the rtlcss plugin is only applied to specific CSS/SCSS files in your Vite and Laravel setup, avoiding any unwanted transformations in other files.

sody81's avatar
Level 5

I couldn't find a plugin vite-plugin-postcss that can achive the suggestion. any other ideas?

sody81's avatar
Level 5

tried my luck with chatGPT, but also without luck, here its suggestion:

import { defineConfig } from 'vite'; import laravel from 'laravel-vite-plugin'; import tailwindcss from 'tailwindcss'; import autoprefixer from 'autoprefixer'; import rtlcss from 'rtlcss'; export default defineConfig({ plugins: [ laravel({ input: [ 'resources/css/app.css', 'resources/css/rtl.css', ], refresh: true,}),], css: {

postcss: {

  plugins: [ tailwindcss,  autoprefixer,

    {

      postcssPlugin: 'conditional-rtlcss',

      Once(root, { result }) {

        if (result.opts.from && result.opts.from.includes('rtl.css')) {

          rtlcss().Once(root, { result });

        }

      },
    },
  ],
},

}, });

sody81's avatar
Level 5

@313ava unfortunatly no it didnt work. I wanted flexibility when that didnt go I ended doing rtlcss manually when needd. for my case it was okay.

Sami

Please or to participate in this conversation.