1

听起来可能很愚蠢，但我最近开始使用 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或观察程序时，它编译引导 scss 文件并使其成为 RTL 并将其放在公共 css 目录中，就像使用默认 LTR 一样那是。

4

2 回答 2

5

您可以使用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

于 2018-06-02T03:01:01.287 回答
0

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

不要忘记安装 rtlcss 包

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

于 2021-06-14T23:06:55.713 回答