Как использовать пакет узлов rtlcss с twitter-bootstrap на Laravel?

Question

Как использовать пакет узлов rtlcss с twitter-bootstrap на Laravel?

Возможно, это звучит глупо, но я недавно начал работать с миксом laravel для компиляции файлов scss и js. Но я не могу что-то понять.

Я хочу использовать rtlcss npm для создания twitter-bootstrap rtl.
Это актив по умолчанию app.scss Laravel

// Fonts
@import url("https://fonts.googleapis.com/css?family=Raleway:300,400,600");

// Variables
@import "variables";

// Bootstrap
@import "~bootstrap-sass/assets/stylesheets/bootstrap";

И это актив по умолчанию app.js:

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');
}

Я установил rtlCSS через пакет узлов, и теперь я хочу, чтобы я работал npm run dev или наблюдатель, он компилирует файл scss начальной загрузки, делает его RTL и помещает его в общедоступный каталог css, как это делается с LTR по умолчанию, то есть.

0

laravel node.js npm php rtlcss

Решение

Другие решения

Других решений пока нет …

Источник

Accepted Answer

Вы можете легко генерировать RTL CSS с Laravel Mix:

Во-первых, чтобы использовать Laravel mix, вы должны установить необходимые библиотеки из npm:
npm install

Затем установите WebPack-РТЛ-плагин: npm install webpack-rtl-plugin --save-dev

Затем в webpack.mix.js (находится в корне вашего приложения laravel) импортируйте pulgin вверху:

let WebpackRTLPlugin = require('webpack-rtl-plugin');

Затем замените:

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

со следующим:

mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css')
.webpackConfig({
plugins: [
new WebpackRTLPlugin()
]
});

Наконец, запустите: npm run dev (для развития) или npm run prod (для производства)

В результате Larave Mix сгенерирует:

public/css/app.css (оригинал css от sass)

public/css/app.rtl.css (версия RTL CSS)

а также public/css/app.js

0