Skip to content

Instantly share code, notes, and snippets.

@carmelodevuz
Last active January 23, 2023 11:38
Embed
What would you like to do?
Keenthemes Metronic 8.038 RTL

RTL

  1. In file '/angular/demo{#}/src/assets/sass/style.angular.scss' comment the next rows [8, 9]:
  // @import "./core/vendors/plugins/prismjs";
  // @import "./core/vendors/plugins/formvalidation";

!!! THESE TWO PLUGINS AREN'T RTL READY !!!

  1. Add 'rtl.config.js' file into project (path should be: '/angular/demo{#}/rtl.config.js').

  2. In file 'package.json' add the next 'devDependencies':

"@types/sass-loader": "8.0.3",
"css-loader": "6.7.1",
"del": "6.0.0",
"mini-css-extract-plugin": "2.6.1",
"sass-loader": "13.0.2",
"webpack": "5.74.0",
"webpack-cli": "4.10.0"
  1. In file 'package.json' add the next scripts command:
"rtl": "webpack --config=rtl.config.js"
  1. Find and replace next attributes in the project: data-kt-menu-placement="bottom-start" => data-kt-menu-placement="bottom-end" data-kt-menu-placement="right-start" => data-kt-menu-placement="left-start"

  2. Run:

yarn install
  1. In file '/angular/demo{#}/src/index.html' change 'body' tag:
<body root id="kt_body" class="mat-typography" direction="rtl" dir="rtl" style="direction: rtl">
  1. Run:
yarn run rtl

!!! SHOULD CREATE THE NEXT FILE: '/angular/demo{#}/src/assets/css/style.rtl.css'. !!!

  1. In file '/angular/demo{#}/src/styles.scss' file change RTL import to the LTL one (row 2):
/* You can add global styles to this file, and also import other style files */
// @import "./assets/sass/style.scss";
// Replace above style with this css file to enable RTL styles
// @import './assets/sass/plugins.scss';
@import "./assets/css/style.rtl.css";
@import "./assets/sass/style.angular.scss";
  1. Run:
ng serve
const path = require('path')
const del = require('del')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const RtlCssPlugin = require('rtlcss-webpack-plugin')
// global variables
const rootPath = path.resolve(__dirname)
const distPath = rootPath + '/src/assets'
const entries = {
"css/style": "./src/assets/sass/style.scss",
}
// remove older folders and files
;(async () => {
await del(distPath + '/css', {force: true})
})()
module.exports = {
mode: 'development',
stats: 'verbose',
performance: {
hints: 'error',
maxAssetSize: 10000000,
maxEntrypointSize: 4000000,
},
entry: entries,
output: {
// main output path in assets folder
path: distPath,
// output path based on the entries' filename
filename: '[name].js',
},
resolve: {
extensions: ['.scss'],
},
plugins: [
new MiniCssExtractPlugin({
filename: '[name].rtl.css',
}),
new RtlCssPlugin({
filename: '[name].rtl.css',
}),
{
apply: (compiler) => {
// hook name
compiler.hooks.afterEmit.tap('AfterEmitPlugin', () => {
;(async () => {
await del(distPath + '/css/*.js', {force: true})
})()
})
},
},
],
module: {
rules: [
{
test: /\.scss$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
{
loader: 'sass-loader',
options: {
sourceMap: true,
},
},
],
},
],
},
}
@obed-scriptit
Copy link

yarn run rtl
yarn run v1.22.19
$ webpack --config webpack-rtl.config.js
[webpack-cli] Failed to load '/Users/ahmedalobed/Documents/script_projects/metronic-edunet-master/webpack-rtl.config.js' config
[webpack-cli] Error [ERR_REQUIRE_ESM]: require() of ES Module /Users/ahmedalobed/Documents/script_projects/metronic-edunet-master/node_modules/del/index.js from /Users/ahmedalobed/Documents/script_projects/metronic-edunet-master/webpack-rtl.config.js not supported.
Instead change the require of index.js in /Users/ahmedalobed/Documents/script_projects/metronic-edunet-master/webpack-rtl.config.js to a dynamic import() which is available in all CommonJS modules.
at Object. (/Users/ahmedalobed/Documents/script_projects/metronic-edunet-master/webpack-rtl.config.js:10:13)
at async Promise.all (index 0)
at async WebpackCLI.tryRequireThenImport (/Users/ahmedalobed/Documents/script_projects/metronic-edunet-master/node_modules/webpack-cli/lib/webpack-cli.js:254:18)
at async loadConfigByPath (/Users/ahmedalobed/Documents/script_projects/metronic-edunet-master/node_modules/webpack-cli/lib/webpack-cli.js:1712:19)
at async Promise.all (index 0)
at async WebpackCLI.loadConfig (/Users/ahmedalobed/Documents/script_projects/metronic-edunet-master/node_modules/webpack-cli/lib/webpack-cli.js:1765:29)
at async WebpackCLI.createCompiler (/Users/ahmedalobed/Documents/script_projects/metronic-edunet-master/node_modules/webpack-cli/lib/webpack-cli.js:2187:18)
at async WebpackCLI.runWebpack (/Users/ahmedalobed/Documents/script_projects/metronic-edunet-master/node_modules/webpack-cli/lib/webpack-cli.js:2323:16)
at async Command. (/Users/ahmedalobed/Documents/script_projects/metronic-edunet-master/node_modules/webpack-cli/lib/webpack-cli.js:1060:13)
at async Promise.all (index 1)
at async Command. (/Users/ahmedalobed/Documents/script_projects/metronic-edunet-master/node_modules/webpack-cli/lib/webpack-cli.js:1674:7) {
code: 'ERR_REQUIRE_ESM'
}
error Command failed with exit code 2.

@carmelodevuz
Copy link
Author

I've updated the config file and packages versions.

@shakoorattari
Copy link

Is it working now?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment