Webpack - Revision history

Thai: /* Using Webpack to customize the styles */

2025-02-02T20:43:19Z

Using Webpack to customize the styles

← Older revision		Revision as of 20:43, 2 February 2025
Line 21:		Line 21:

	Every time you change the source files run <code>npm run prod</code> again.		Every time you change the source files run <code>npm run prod</code> again.

	~~Note that the custom files will only work with Bootstrap 4 enabled:~~

	~~$wgTweekiSkinUseBootstrap4 = true;~~

	=== Customizing Bootstrap variables ===		=== Customizing Bootstrap variables ===

2021-10-29T07:59:37Z

Using Webpack to customize the styles

← Older revision		Revision as of 07:59, 29 October 2021
Line 8:		Line 8:
	npm install		npm install

	Create your customized ~~scripts and~~ styles		Create your customized styles

	mv resources/styles/example.custom.scss resources/styles/custom.scss		mv resources/styles/example.custom.scss resources/styles/custom.scss

2021-10-29T07:59:30Z

Using Webpack to customize the styles

← Older revision		Revision as of 07:59, 29 October 2021
Line 10:		Line 10:
	Create your customized scripts and styles		Create your customized scripts and styles

	~~mv resources/scripts/example.custom.js resources/scripts/custom.js~~
	mv resources/styles/example.custom.scss resources/styles/custom.scss		mv resources/styles/example.custom.scss resources/styles/custom.scss

2021-09-17T09:22:12Z

Using Webpack to customize the styles

← Older revision		Revision as of 09:22, 17 September 2021
Line 23:		Line 23:
	Every time you change the source files run <code>npm run prod</code> again.		Every time you change the source files run <code>npm run prod</code> again.

	Note that the custom files will only ~~be used~~ with Bootstrap 4 enabled:		Note that the custom files will only work with Bootstrap 4 enabled:

	$wgTweekiSkinUseBootstrap4 = true;		$wgTweekiSkinUseBootstrap4 = true;

2021-09-17T09:21:57Z

Using Webpack to customize the styles

← Older revision		Revision as of 09:21, 17 September 2021
Line 22:		Line 22:

	Every time you change the source files run <code>npm run prod</code> again.		Every time you change the source files run <code>npm run prod</code> again.

			Note that the custom files will only be used with Bootstrap 4 enabled:

			$wgTweekiSkinUseBootstrap4 = true;

	=== Customizing Bootstrap variables ===		=== Customizing Bootstrap variables ===

2021-09-17T09:16:14Z

Using Webpack to customize the styles

← Older revision		Revision as of 09:16, 17 September 2021
Line 22:		Line 22:

	Every time you change the source files run <code>npm run prod</code> again.		Every time you change the source files run <code>npm run prod</code> again.

			=== Customizing Bootstrap variables ===

			Custom values for Bootstrap variables have to be defined right before importing the Bootstrap default variables. You can either write the variables directly in the <code>custom.scss</code> file or you create your own <code>_variables.scss</code> in the <code>resources/styles/custom/</code> directory and uncomment the following line in <code>custom.scss</code>:

			@import "custom/variables";

2021-09-17T09:12:03Z

Using Webpack to customize the styles

← Older revision		Revision as of 09:12, 17 September 2021
Line 3:		Line 3:
	Install node.js – you can follow [https://github.com/nodesource/distributions/blob/master/README.md these instructions] for most linux distributions		Install node.js – you can follow [https://github.com/nodesource/distributions/blob/master/README.md these instructions] for most linux distributions

	~~Install~~ webpack dependencies		Move to Tweeki's directory and install webpack dependencies

			cd skins/Tweeki/
	npm install		npm install

2021-09-16T14:33:58Z

Using Webpack to customize the styles

← Older revision		Revision as of 14:33, 16 September 2021
Line 19:		Line 19:

	$wgTweekiSkinUseCustomFiles = true;		$wgTweekiSkinUseCustomFiles = true;

			Every time you change the source files run <code>npm run prod</code> again.

2021-09-16T14:33:10Z

← Older revision		Revision as of 14:33, 16 September 2021
Line 1:		Line 1:
	=== Using Webpack to customize the styles ===		=== Using Webpack to customize the styles ===

	Install node.js – you can follow [these instructions] for most linux distributions		Install node.js – you can follow [https://github.com/nodesource/distributions/blob/master/README.md these instructions] for most linux distributions

	Install webpack dependencies		Install webpack dependencies

2021-09-16T14:32:59Z

Using Webpack to customize the styles

← Older revision		Revision as of 14:32, 16 September 2021
Line 1:		Line 1:
	=== Using Webpack to customize the styles ===		=== Using Webpack to customize the styles ===

	Install node.js		Install node.js – you can follow [these instructions] for most linux distributions

	~~sudo apt-get install nodejs npm~~

	Install webpack dependencies		Install webpack dependencies