rtlcss with laravel mix not working

[chadidi]

i required rtlcss like this inside my webpack.mix.js file : .options({ postCss: [ require('rtlcss')() ] }); and i am compiling sass and some js files but it's not outputing any thing just the css/js files, is there any attributes that i have to pass, helppp please. note : i have 1 day experience with postcss

[MohammadYounes]

I am not familiar with laravel mix. However, Your question indicate that you are expecting a separate file ?

If Yes, PostCSS doesn't work in that way - regardless of how many plugins you run, you'll end up with one file - Please check the output CSS to see if it is converted or not ?

In case you want a separate file, see the solution described here.

Thanks!

[chadidi]

@MohammadYounes i searched the internet but i didn't find a solution, so i returned back to Laravel Elixir it's the only solution for now. Thanks for your response ;D

[Qanah]

the problem in this solution the infinity loop in npm run watch win require the out put from app.js https://github.com/JeffreyWay/laravel-mix/issues/228

let mix = require('laravel-mix'); let exec = require('child_process').exec;

mix.js('resources/assets/js/app.js', 'public/js'); mix.sass('resources/assets/sass/app.scss', 'public/css');

mix.then(() => { exec('rtlcss public/css/app.css public/css/app.rtl.css', (error) => { if (error) { console.error(exec error: ${error}); return; } }); });

[alhoqbani]

Here is how I do it using Laravel Mix:

Step (1):

create a new file: resources/assets/sass/app-rtl.scss with this content:

// import any google fonts specific to rtl
@import url('https://fonts.googleapis.com/css?family=Cairo');

// Override any bootstrap varibales
$font-family-sans-serif: 'Roboto', sans-serif;

// Import the main app.scss
@import "app"; // (The only required line)

// Add custom css for the rtl-css file
p {
    font-family: 'Cairo', sans-serif;
}

Step (2):

Edit your webpack.mix.js as the following:

let mix = require('laravel-mix');
let exec = require('child_process').exec;

mix.js('resources/assets/js/app.js', 'public/js')
    .sass('resources/assets/sass/app.scss', 'public/css')
    .sass('resources/assets/sass/app-rtl.scss', 'public/css')
    .then(() => {
        exec('node_modules/rtlcss/bin/rtlcss.js public/css/app-rtl.css ./public/css/app-rtl.css');
    })
    .version(['public/css/app-rtl.css']);

Now, you can reference the new rtl-css in your html:

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

And @MohammadYounes, thanks for the great tool.

[MohammadYounes]

Thanks @alhoqbani

[vrushank]

Thanks @alhoqbani

I am trying the same way but it does not seem to be working. It creates the rtl file but does not add in mix-manifest.json.

Do you have any idea how can I fix that?

Regards.

[alhoqbani]

It does not have to be in mix-manifest.json.

Just make sure the file is processed by rtlcss.

On Oct 17, 2019, at 1:18 PM, vrushank notifications@github.com wrote:

mix-manifest.json

[alhoqbani]

This is a better way of using this library with laravel-mix:

mix.js("resources/js/app.js", "public/js")
    .sass("resources/sass/app.scss", "public/css")
    .sass("resources/sass/app-rtl.scss", "public/css", {}, [
        require("rtlcss")(),
    ]);

This way you will have all the benefits of laravel-mix (.e.g hot reload, versioning...)

[khesayed]

I tried multiple solutions with no luck after multiple tries the below code works fine and it covers all mix features like versioning, source-maps, etc.

mix.sass('resources/sass/app.scss', 'public/css');
mix.postCss('public/css/app.css', 'public/css/app.rtl.css', [
  require('rtlcss'),
]);