carmelodevuz/Readme.md

## Readme.md

      
    Raw
  

              Readme.md
            
          
    RTL


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 !!!


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


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"

In file 'package.json' add the next scripts command:

"rtl": "webpack --config=rtl.config.js"


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"


Run:


yarn install


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">

Run:

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


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";

Run:

ng serve

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