Document how to compile Bootstrap5 subtheme

Created on 10 March 2024, 11 months ago
Updated 12 June 2024, 7 months ago

Problem/Motivation

I created a subtheme and wanted to compile it, but got an error when I tried to install with NPM, found in the README instructions.

Steps to reproduce

  1. Create a subtheme and want to compile it
  2. Follow the guide to compile in the README and run npm install inside the subtheme folder
  3. Get a "no such file" (package.json) error

Proposed resolution

Add instructions in the README on how to recompile a sub-theme, together with the "how to create a subtheme" section:

  • How to recompile a sub-theme
  • How to update variables, such as --bs-dark-rgb and --bs-light-rgb

Example found at https://wikihandbooks.com/drupal/th_bootstrap5.html, thank you @gisle for documenting this.

Remaining tasks

User interface changes

API changes

Data model changes

πŸ“Œ Task
Status

Needs review

Version

4.0

Component

Code

Created by

πŸ‡©πŸ‡°Denmark ressa Copenhagen

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Merge Requests

Comments & Activities

  • Issue created by @ressa
  • πŸ‡©πŸ‡°Denmark ressa Copenhagen
  • πŸ‡©πŸ‡°Denmark ressa Copenhagen
  • πŸ‡¬πŸ‡§United Kingdom maseyuk

    I've only just started looking at the theme, but I think those instructions are if you're going to help develop the main theme.

    There's a README in your subtheme that tells you how to compile. FYI it doesn't need a package.json/npm install

  • Status changed to Closed: works as designed 10 months ago
  • πŸ‡¦πŸ‡ΊAustralia VladimirAus Brisbane, Australia

    Subtheme doesn't have npm tools.
    Please look after your own sass binary.
    The instructions on how to install sass can be found here: https://sass-lang.com/

  • Assigned to ressa
  • Status changed to Needs work 10 months ago
  • πŸ‡©πŸ‡°Denmark ressa Copenhagen

    Thanks @maseyuk, you're correct. npm install is not needed to recompile a sub-theme.

    @VladimirAus: I have Sass installed, the problem was that the initial npm install is not needed for a sub-theme. I'll create a MR for the README file.

  • Merge request !62Add Subtheme create and recompile section β†’ (Open) created by ressa
  • Issue was unassigned.
  • Status changed to Needs review 10 months ago
  • πŸ‡©πŸ‡°Denmark ressa Copenhagen

    I added sub-theme recompile instructions in the README file, which is probably where the users expect to find them.

    I also made minor updates, to align more with the README template β†’ .

  • πŸ‡ΊπŸ‡ΈUnited States erutan

    As opposed to the v3 theme which mentions using npm the v4 readme now just mentions the basic SASS command. This is probably good enough, the main theme has all the creation stuff in it (which someone would have already done). I'm tempted to flag this as outdated at the moment.

    ### CSS compilation.
    
    Prerequisites: install [sass](https://sass-lang.com/install).
    
    To compile, run from subtheme directory: `sass scss/style.scss css/style.css && sass scss/ck5style.scss css/ck5style.css`

    If anyone would find it useful, here's the project config I'm using for https://marketplace.visualstudio.com/items?itemName=glenn2223.live-sass in VSCode for this theme. :)

    "settings": {
    		"liveSassCompile.settings.compileOnWatch": false,
    		"liveSassCompile.settings.watchOnLaunch": true,
    		"liveSassCompile.settings.useNewCompiler": true,
    		"liveSassCompile.settings.showOutputWindowOn": "Warning",
    		"liveSassCompile.settings.formats": [
    			{
    				"format": "expanded",
    				"extensionName": ".css",
    				"savePath": null,
    				"savePathReplacementPairs": {
    					"/scss/": "/css"
    				}
    			},
    			{
    				"format": "compressed",
    				"extensionName": "-min.css",
    				"savePath": null,
    				"savePathReplacementPairs": {
    					"/scss/": "/css"
    				},
    				"generateMap": false
    			}
    		]
    	}
Production build 0.71.5 2024