Skip to content

Instantly share code, notes, and snippets.

@carmelodevuz

carmelodevuz/How-to.md

Last active April 3, 2025 21:58
Show Gist options
  • Save carmelodevuz/9ee0d92db7bd15c3612e25356139c4f9 to your computer and use it in GitHub Desktop.
Save carmelodevuz/9ee0d92db7bd15c3612e25356139c4f9 to your computer and use it in GitHub Desktop.
Download ZIP
Metronic React v8.1.2 - RTL
Raw
How-to.md
  1. Copy and paste rtl.config.js file.
  2. Add packages to the package.json file (copy them from the package.json) below and re-install packages with yarn command.
  3. Run the command: yarn run webpack --config webpack-rtl.config.js
  4. In the file src/index.tsx file comment rows [18, 19]: // import './_metronic/assets/sass/plugins.scss' // import './_metronic/assets/sass/style.scss'
  5. In the file src/index.tsx add the row: import './_metronic/assets/css/style.rtl.css' (! before style.react.scss).
  6. In the file public/index.html update the html tag with: <html direction="rtl" dir="rtl" style="direction: rtl">
  7. 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'
  8. In the file src/_metronic/layout/components/header/MenuInnerWithSub.tsx add the type 'left-start' to the 'menuPlacement' property: menuPlacement?: 'right-start' | 'bottom-start' | 'left-start'
  9. In the file demo1/src/_metronic/layout/components/header/MenuInner.tsx update all 'right-start' to 'left-start'
Raw
package.json
...
"devDependencies": {
...
"@types/sass-loader": "8.0.3",
"css-loader": "6.7.1",
"del": "6.0.0",
"mini-css-extract-plugin": "2.6.1",
"rtlcss-webpack-plugin": "4.0.7",
"sass-loader": "13.0.2",
"webpack": "5.74.0",
"webpack-cli": "4.10.0"
}
...
Raw
rtl.config.js
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/_metronic/assets'
const entries = {
'css/style': './src/_metronic/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,
},
},
],
},
],
},
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment