Difference between revisions of "Webpack"
From Tweeki
| (6 intermediate revisions by the same user not shown) | |||
| 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 | ||
| − | + | Move to Tweeki's directory and install webpack dependencies | |
| + | cd skins/Tweeki/ | ||
npm install | npm install | ||
| − | Create your customized | + | Create your customized styles |
| − | |||
mv resources/styles/example.custom.scss resources/styles/custom.scss | mv resources/styles/example.custom.scss resources/styles/custom.scss | ||
| Line 19: | Line 19: | ||
$wgTweekiSkinUseCustomFiles = true; | $wgTweekiSkinUseCustomFiles = true; | ||
| + | |||
| + | 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 === | ||
| + | |||
| + | 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"; | ||
Latest revision as of 09:59, 29 October 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 styles
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 work 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";