Skip to content

Instantly share code, notes, and snippets.

@carmelodevuz
Last active Aug 20, 2022
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

obed-scriptit commented Aug 4, 2022

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: Cannot find module 'del'
Require stack:

  • /Users/ahmedalobed/Documents/script_projects/metronic-edunet-master/webpack-rtl.config.js
  • /Users/ahmedalobed/Documents/script_projects/metronic-edunet-master/node_modules/webpack-cli/lib/webpack-cli.js
  • /Users/ahmedalobed/Documents/script_projects/metronic-edunet-master/node_modules/webpack-cli/lib/bootstrap.js
  • /Users/ahmedalobed/Documents/script_projects/metronic-edunet-master/node_modules/webpack-cli/bin/cli.js
  • /Users/ahmedalobed/Documents/script_projects/metronic-edunet-master/node_modules/webpack/bin/webpack.js
    at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)
    at Function.Module._load (node:internal/modules/cjs/loader:778:27)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at Object. (/Users/ahmedalobed/Documents/script_projects/metronic-edunet-master/webpack-rtl.config.js:10:13)
    at Module._compile (node:internal/modules/cjs/loader:1105:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1159:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:1005:19) {
    code: 'MODULE_NOT_FOUND',
    requireStack: [
    '/Users/ahmedalobed/Documents/script_projects/metronic-edunet-master/webpack-rtl.config.js',
    '/Users/ahmedalobed/Documents/script_projects/metronic-edunet-master/node_modules/webpack-cli/lib/webpack-cli.js',
    '/Users/ahmedalobed/Documents/script_projects/metronic-edunet-master/node_modules/webpack-cli/lib/bootstrap.js',
    '/Users/ahmedalobed/Documents/script_projects/metronic-edunet-master/node_modules/webpack-cli/bin/cli.js',
    '/Users/ahmedalobed/Documents/script_projects/metronic-edunet-master/node_modules/webpack/bin/webpack.js'
    ]
    }
    error Command failed with exit code 2.
    info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

@obed-scriptit
Copy link

obed-scriptit commented Aug 4, 2022

npm install del

npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: @angular-eslint/schematics@13.2.1
npm ERR! Found: @angular/cli@14.0.0
npm ERR! node_modules/@angular/cli
npm ERR! dev @angular/cli@"14.0.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer @angular/cli@">= 13.0.0 < 14.0.0" from @angular-eslint/schematics@13.2.1
npm ERR! node_modules/@angular-eslint/schematics
npm ERR! dev @angular-eslint/schematics@"13.2.1" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: @angular/cli@13.3.9
npm ERR! node_modules/@angular/cli
npm ERR! peer @angular/cli@">= 13.0.0 < 14.0.0" from @angular-eslint/schematics@13.2.1
npm ERR! node_modules/@angular-eslint/schematics
npm ERR! dev @angular-eslint/schematics@"13.2.1" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See /Users/ahmedalobed/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR! /Users/ahmedalobed/.npm/_logs/2022-08-04T07_47_44_888Z-debug-0.log

@obed-scriptit
Copy link

obed-scriptit commented Aug 4, 2022

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

carmelodevuz commented Aug 20, 2022

I've updated the config file and packages versions.

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