carmelodevuz/How-to.md

## How-to.md

      
    Raw
  

              How-to.md
            
          
Copy and paste rtl.config.js file.
Add packages to the package.json file (copy them from the package.json) below and re-install packages with yarn command.
Run the command: yarn run webpack --config webpack-rtl.config.js
In the file src/index.tsx file comment rows [18, 19]:
// import './_metronic/assets/sass/plugins.scss'
// import './_metronic/assets/sass/style.scss'
In the file src/index.tsx add the row: import './_metronic/assets/css/style.rtl.css' (! before style.react.scss).
In the file public/index.html update the html tag with: <html direction="rtl" dir="rtl" style="direction: rtl">
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'
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'
In the file demo1/src/_metronic/layout/components/header/MenuInner.tsx update all 'right-start' to 'left-start'


## 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"
  }
...

## 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,
            },
          },
        ],
      },
    ],
  },
}
	...
	"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"
	}
	...
	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,
	},
	},
	],
	},
	],
	},
	}