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

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.

Usama · Answer 1 · 2018-06-02T03:06:57.927

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

how to force WebpackRTLPlugin to only transform only a specefic css file not all css files — Mahdi mehrabi, Aug 07 '20 at 10:58

score 0 · Answer 2 · answered Jun 14 '21 at 23:06

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'),
]);

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

2 Answers2