Can't compile subtheme

Created on 10 March 2024, about 1 year ago

Problem/Motivation

I created a subtheme and tried to compile it, but get this error:

$ npm install
npm ERR! code ENOENT
npm ERR! syscall open
npm ERR! path /home/user/dev/drupal10/web/themes/custom/b5subtheme/package.json
npm ERR! errno -2
npm ERR! enoent ENOENT: no such file or directory, open '/home/user/dev/drupal10/web/themes/custom/b5subtheme/package.json'
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent

Steps to reproduce

  1. Create a subtheme
  2. Follow the guide to compile: https://git.drupalcode.org/project/bootstrap5#development-and-patching and run npm install inside the subtheme folder
  3. Get a "no such file" (package.json) error

Proposed resolution

It looks like a required package.json file is missing, so maybe it needs to get created during subtheme creation?

Also, it would be great if the README included a guide on how to update a variable, for example --bs-light-rgb.

Remaining tasks

User interface changes

API changes

Data model changes

πŸ› Bug report
Status

Active

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 about 1 year 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 about 1 year 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 about 1 year 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
    			}
    		]
    	}
  • πŸ‡ΊπŸ‡ΈUnited States jdm843

    Thanks @erutan for posting your Live Sass Compiler (glenn) configuration. I spent way too much time trying to get this VS Code compiler to work with my Drupal CMS Bootstrap 5 subtheme. Your config works like a charm!

Production build 0.71.5 2024