D10 | Custom Theme - Dart SASS + Node 16

1. Create a fresh Drupal 10 project.

   1. Two options, Download Drupal 10 directly: https://www.drupal.org/project/drupal/releases/10.0.0

   2. Alternatively, use Composer https://www.drupal.org/docs/develop/using-composer/manage-dependencies

      1. If you have composer globally:

         composer create-project drupal/recommended-project my_site_name_dir 

      2. If you want a different version, add the version number to the command after a colon. For example, to download version 9.3.12:

         composer create-project drupal/recommended-project:9.3.12 my_site_name_dir

2. Create a new, custom Drupal Theme.

   1. Run this command from your project’s root:

      php core/scripts/drupal generate-theme my_new_theme

      1. Change my_new_theme to an appropriate name for your project.

   2. Otherwise, download or create your own them from scratch.
      

3. Update composer.json file, in project root.

   1. Ensure to include drush if you would like to use it - "drush/drush": "^11.4" . You can also run composer require drush/drush
      

4. Create a package.json file, in theme root.

   1. Add what you need

   2. Run the following, suggested commands

      1. npm cache clean --force

      2. nvm ls
         Prints the node versions installed on your machine & the current node version you're using.

      3. nvm use 16

      4. npm install

      5. If updating an existing project

         1. npm uninstall node-sass

         2. npm install sass

      6. npm cache clean --force

5. Create a Lando, or DDev project.

   1. https://docs.drupalcommerce.org/commerce2/developer-guide/install-update/quick-start

   2. https://ddev.readthedocs.io/en/latest/users/quickstart/#craft-cms

   3. https://stackoverflow.com/questions/49785023/how-can-i-create-and-load-a-second-database-in-ddev

6. Start the project.

Issues with changing site version to 10 - changing Node to version 16 - using (node) SASS:

• https://stackoverflow.com/questions/70971967/cant-install-node-sass6-for-node-v16

Actions for theme:

• rm -r node_modules
  This will remove the node_modules folder in your repository. If you are using Webpack, you can also remove the dist folder using rm -r dist and re-build your repository.

• npm cache clean --force

• nvm ls - Prints the node versions installed on your machine & the current node version you're using.

• nvm use 16

• npm uninstall node-sass

• npm install sass
  
  or … npm install node-sass@npm:sass
  
  https://www.npmjs.com/package/node-sass/v/7.0.1 vs https://www.npmjs.com/package/sass
  

• npm install

Node-Sass

• Warning: LibSass and Node Sass are deprecated. While they will continue to receive maintenance releases indefinitely, there are no plans to add additional features or compatibility with any new CSS or Sass features. Projects that still use it should move onto Dart Sass.

• Are you running a M1 mac? ARM64 isn't supported by any version of node-sass right now.

  • Trying to run npm install will error out.

Issues Drupal.org

https://www.drupal.org/project/drupal/issues/3261734#comment-14421915

https://www.drupal.org/project/bootstrap_sass/issues/3259490

https://www.hook42.com/blog/nodejs-version-control-drupal-themes

https://stackoverflow.com/questions/70971967/cant-install-node-sass6-for-node-v16

https://stackoverflow.com/questions/69312134/error-with-node-sass-when-running-npm-install

https://stackoverflow.com/questions/70971967/cant-install-node-sass6-for-node-v16

Separate issues ?

we are using https://www.npmjs.com/package/jpegtran-bin , but should be using https://www.npmjs.com/package/imagemin-jpegtran ??

Helpful links:

https://blog.logrocket.com/how-switch-node-js-versions-nvm/