如何在Laravel上使用带有twitter引导的rtlcss节点包？

Question

这听起来可能很愚蠢，但我最近开始使用laravel来编译scss和js文件。但我不明白什么。

我想使用rtlcss npm来制作twitter引导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或观察者时，它编译引导scss文件并使其RTL并将其放入公共css目录中，就像它对默认LTR那样。

Answer 1

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

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

然后，安装webpack-rtl-plugin：npm install webpack-rtl-plugin --save-dev

然后，在webpack.mix.js (位于您的laravel应用程序的根部)中，导入顶部的拉金：

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版本)

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

​