Difference between revisions of "Webpack"

From Tweeki
Jump to: navigation, search
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 ===

Revision as of 10:21, 17 September 2021

Using Webpack to customize the styles

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

Move to Tweeki's directory and install webpack dependencies

cd skins/Tweeki/
npm install

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

Create customized files

npm run prod

Tell MediaWiki to use the custom files with this line in LocalSettings.php

$wgTweekiSkinUseCustomFiles = true;

Every time you change the source files run npm run prod again.

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

$wgTweekiSkinUseBootstrap4 = true;

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 custom.scss file or you create your own _variables.scss in the resources/styles/custom/ directory and uncomment the following line in custom.scss:

@import "custom/variables";