如何在 Laravel 上使用带有 twitter-bootstrap 的 rtlcss 节点包

Question

这听起来可能很愚蠢，但我最近开始使用 laravel mix 来编译 scss 和 js 文件。但我无法理解一些事情。

我想使用 rtlcss npm 来制作 twitter-bootstrap rtl。这是Laravel的默认app.scss资产

// Fonts
@import url("https://fonts.googleapis.com/css?family=Raleway:300,400,600");
// Variables
@import "variables";
// Bootstrap
@import "~bootstrap-sass/assets/stylesheets/bootstrap";

这是默认的应用程序.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 一样。

Answer 1

您可以使用Laravel Mix轻松生成RTL css：

首先，要使用Laravel混合，您应该从npm安装必要的库： npm install

然后，安装 webpack-rtl-plugin： 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（来自 Sass 的原始 CSS）

public/css/app.rtl.css（RTL css 版本）

和public/css/app.js

Answer 2

多次尝试后，我尝试了多种解决方案，但没有运气，下面的代码工作正常，它涵盖了所有混合功能，如版本控制、源映射等。

不要忘记安装 rtlcss 包

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