如何在 Laravel 上将 rtlcss 节点包与 twitter-bootstrap 一起使用？

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";

这是默认的 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或观察程序时，它编译 bootstrap scss 文件并将其设为 RTL 并将其放入公共 css 目录中，就像使用默认 LTR 一样那是。

Answer 1

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

首先，要使用 Laravel mix，您应该从 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