How to use rtlcss node package with twitter-bootstrap on Laravel? - php

Question

It may sound stupid but I've recently started working with laravel mix for compiling scss and js files. But I can't understand something.
I want to use rtlcss npm to make the twitter-bootstrap rtl.
This is the default app.scss asset of Laravel
// Fonts
#import url("https://fonts.googleapis.com/css?family=Raleway:300,400,600");
// Variables
#import "variables";
// Bootstrap
#import "~bootstrap-sass/assets/stylesheets/bootstrap";
And this is the default app.js asset:
window._ = require('lodash');
try {
window.$ = window.jQuery = require('jquery');
require('bootstrap-sass');
} catch (e) {}
window.axios = require('axios');
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
let token = document.head.querySelector('meta[name="csrf-token"]');
if (token) {
window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
} else {
console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token');
}
I've installed the rtlCSS through node package, now I what I want to happen is when I run npm run dev or the watcher, it compiles the bootstrap scss file and make it RTL and put it in the public css directory like it does with the default LTR that is.

Answer 1

Your can easily generate RTL css with Laravel Mix:
First, to use Laravel mix you should install the necessary libraries from npm:
npm install
Then, install webpack-rtl-plugin: npm install webpack-rtl-plugin --save-dev
Then, in webpack.mix.js (located at the root of your laravel app) import the pulgin at the top:
let WebpackRTLPlugin = require('webpack-rtl-plugin');
Then, replace the:
mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css');
with the following:
mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css')
.webpackConfig({
plugins: [
new WebpackRTLPlugin()
]
});
Finally, run: npm run dev (for develpoment) or npm run prod (for production)
As a result, Larave Mix will generate:
public/css/app.css (the original css from sass)
public/css/app.rtl.css (the RTL css version)
and public/css/app.js

Answer 2

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.
Don't forget to install rtlcss package
mix.sass('resources/sass/app.scss', 'public/css');
mix.postCss('public/css/app.css', 'public/css/app.rtl.css', [
require('rtlcss'),
]);