title: Use Dart Sass modules in Next.js
body: <p>I want to support multiple Sass files with Next.js (v10.0.9).</p>
  <p>Following the <a href="https://nextjs.org/docs/basic-features/built-in-css-support#sass-support" rel="nofollow noreferrer">directions</a>, I've installed <code>sass</code> (v1.32.8, under <code>devDependencies</code>).</p>
  <p>styles/globals.scss works fine, imported into pages/_app.tsx with <code>import '../styles/globals.scss';</code>.</p>
  <p>However, if I add styles/colors.scss containing <code>$base-color: darkblue;</code> and attempt to use it in globals.scss as follows:</p>
  <pre><code>@use 'colors';
  
  body {
    color: $base-color;
  }
  </code></pre>
  <p><code>yarn dev</code> reports:</p>
  <blockquote>
  <p>error - ./styles/globals.scss ((webpack)/css-loader/cjs.js??ref--5-oneOf-7-1!(webpack)/postcss-loader/cjs.js??ref--5-oneOf-7-2!(webpack)/resolve-url-loader??ref--5-oneOf-7-3!(webpack)/sass-loader/cjs.js??ref--5-oneOf-7-4!./styles/globals.scss)</p>
  <p>SassError: Undefined variable.</p>
  <p>4 │   color: $base-color;</p>
  </blockquote>
  <p>I've tried adding <code>sassOptions</code> with <code>includePaths</code> in next.config.js, changing the <code>@use</code> path, etc. without success.</p>
  <p>What am I doing wrong?</p>