Page Comparison

...

If you are starting a new project, there are also some helpful steps included for you.

...

Changing your project to use Dart SASS with Node 16

1. Edit the package.json file, in theme root.

   1. Add what you need. Here’s a helpful example with explanation: https://www.hook42.com/blog/nodejs-version-control-drupal-themes

   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. npm cache clean --force

   3. If you run into a problem, and want to try again:

      1. 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.

   4. If you are updating an existing Node 14 project, that uses npm node-sass, you will need to make a few changes before updating to Node 16 and npm sass.

      1. What is the difference? Read these first - https://www.npmjs.com/package/node-sass/v/7.0.1 vs https://www.npmjs.com/package/sass

      2. 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.

         • If you try to run npm install will error out. Instead, run these first while also reviewing from the start of this section:

           • npm uninstall node-sass

           • npm install sass or npm i sass --save or npm install node-sass@npm:sass
             

Potential warning or errors known withchanging with changing Node to version 16 and Dart SASS:

• Deprecation Warning: $weight: Passing a number without unit % (30) is deprecated.

• Deprecation Warning: Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0.

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

• https://stackoverflow.com/questions/60394291/error-node-modules-node-sass-command-failed

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

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

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

• Possibly relevant:
  We are using https://www.npmjs.com/package/jpegtran-bin , but should be using https://www.npmjs.com/package/imagemin-jpegtran?

Create a new D10 project which uses Dart SASS

1. Create a fresh Drupal project, using any option you prefer:

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

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

      1. If you have composer globally:

         Code Block
         composer create-project drupal/recommended-project my_site_name_dir

      2. Change my_site_name_dir to an appropriate name for your project.

   3. Via Docker - docker run --rm -i --tty -v $PWD:/app composer create-project drupal/recommended-project my_site_name_dir --ignore-platform-reqs

2. Create a new, custom Drupal Theme.

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

      Code Block
      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 theme 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 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
      

5. Start the project.

Additional, helpful links:

...