fix(templates): remove tilde SCSS imports and add Sass loadPaths for Windows (#16295)

## Summary

- Removes deprecated tilde (`~`) prefix from `@import` statements in all
template SCSS files (`website`, `with-vercel-website`, `ecommerce`). The
tilde syntax relies on legacy Webpack resolution behavior and is not
supported by Turbopack, which is the default bundler in Next.js 16.
- Adds `sassOptions.loadPaths` pointing to `@payloadcms/ui/dist/scss/`
in each template's `next.config.ts`. This is a workaround for a
Turbopack bug on Windows where Sass fails to resolve sibling imports
(e.g. `@import 'vars'`) due to missing `includePaths` and backslash path
issues (vercel/next.js#86431).
- Expands the `lint:scss` script glob to also cover
`templates/**/*.scss`, so the existing `no-tilde-imports` stylelint rule
(added in #15028) catches template files going forward.

Fixes #16059

## Disclaimer

This bug only reproduces on Windows. We are a Mac-only team and have not
been able to reproduce it locally, but the fix aligns with the confirmed
community workaround and is consistent with the changes already applied
to `packages/ui` in #15028. If the next release still does not resolve
the issue for Windows users, I am happy to quickly explore a follow-up
PR.

## Test plan

- [x] Verify `pnpm run lint:scss` passes (no tilde imports detected)
- [ ] Windows users: run `npx create-payload-app@latest -t website` and
confirm `npm run dev` no longer throws `Can't find stylesheet to import`
- [x] Verify templates still compile correctly on macOS/Linux (no
regressions from `loadPaths` addition)

Co-authored-by: German Jablonski <GermanJablo@users.noreply.github.com>

Author: GermanJablo

package.json

@@ -89,7 +89,7 @@
     "lint": "turbo run lint --log-order=grouped --continue --filter \"!blank\" --filter \"!website\" --filter \"!ecommerce\"",
     "lint-staged": "lint-staged",
     "lint:fix": "turbo run lint:fix --log-order=grouped --continue --filter \"!blank\" --filter \"!website\" --filter \"!ecommerce\"",
-    "lint:scss": "stylelint \"packages/ui/src/**/*.scss\"",
+    "lint:scss": "stylelint \"packages/ui/src/**/*.scss\" \"templates/**/*.scss\"",
     "obliterate-playwright-cache-macos": "rm -rf ~/Library/Caches/ms-playwright && find /System/Volumes/Data/private/var/folders -type d -name 'playwright*' -exec rm -rf {} +",
     "prepare": "husky && pnpm turbo build --filter @payloadcms/typescript-plugin",
     "prepare-run-test-against-prod": "pnpm bf && rm -rf test/packed && rm -rf test/node_modules && rm -rf app && rm -f test/pnpm-lock.yaml && pnpm run script:pack --all --no-build --dest test/packed && pnpm runts test/setupProd.ts && cd test && pnpm i --ignore-workspace && cd ..",

templates/ecommerce/next.config.ts

@@ -10,6 +10,11 @@ import { redirects } from './redirects'
 const NEXT_PUBLIC_SERVER_URL = process.env.NEXT_PUBLIC_SERVER_URL || 'http://localhost:3000'
 
 const nextConfig: NextConfig = {
+  // Temporarily required on Windows until Next.js fixes Turbopack Sass resolution.
+  // See: https://github.com/vercel/next.js/issues/86431
+  sassOptions: {
+    loadPaths: ['./node_modules/@payloadcms/ui/dist/scss/'],
+  },
   images: {
     localPatterns: [
       {

templates/ecommerce/src/components/BeforeDashboard/index.scss

@@ -1,4 +1,4 @@
-@import '~@payloadcms/ui/scss';
+@import '@payloadcms/ui/scss';
 
 .dashboard .before-dashboard {
   margin-bottom: base(1.5);

templates/website/next.config.ts

@@ -12,6 +12,11 @@ const NEXT_PUBLIC_SERVER_URL = process.env.VERCEL_PROJECT_PRODUCTION_URL
   : process.env.__NEXT_PRIVATE_ORIGIN || 'http://localhost:3000'
 
 const nextConfig: NextConfig = {
+  // Temporarily required on Windows until Next.js fixes Turbopack Sass resolution.
+  // See: https://github.com/vercel/next.js/issues/86431
+  sassOptions: {
+    loadPaths: ['./node_modules/@payloadcms/ui/dist/scss/'],
+  },
   images: {
     localPatterns: [
       {

templates/website/src/components/AdminBar/index.scss

@@ -1,4 +1,4 @@
-@import '~@payloadcms/ui/scss';
+@import '@payloadcms/ui/scss';
 
 .admin-bar {
   @include small-break {

templates/website/src/components/BeforeDashboard/index.scss

@@ -1,4 +1,4 @@
-@import '~@payloadcms/ui/scss';
+@import '@payloadcms/ui/scss';
 
 .dashboard .before-dashboard {
   margin-bottom: base(1.5);

templates/with-vercel-website/next.config.ts

@@ -12,6 +12,11 @@ const NEXT_PUBLIC_SERVER_URL = process.env.VERCEL_PROJECT_PRODUCTION_URL
   : process.env.__NEXT_PRIVATE_ORIGIN || 'http://localhost:3000'
 
 const nextConfig: NextConfig = {
+  // Temporarily required on Windows until Next.js fixes Turbopack Sass resolution.
+  // See: https://github.com/vercel/next.js/issues/86431
+  sassOptions: {
+    loadPaths: ['./node_modules/@payloadcms/ui/dist/scss/'],
+  },
   images: {
     localPatterns: [
       {

templates/with-vercel-website/src/components/AdminBar/index.scss

@@ -1,4 +1,4 @@
-@import '~@payloadcms/ui/scss';
+@import '@payloadcms/ui/scss';
 
 .admin-bar {
   @include small-break {

templates/with-vercel-website/src/components/BeforeDashboard/index.scss

@@ -1,4 +1,4 @@
-@import '~@payloadcms/ui/scss';
+@import '@payloadcms/ui/scss';
 
 .dashboard .before-dashboard {
   margin-bottom: base(1.5);