он автоматом должен подключаться?

да, он автоматом подключается во все файлы .scss, его не нужно объявлять

./assets/sass/general.sass
undefined
           ^
     Undefined variable: "$body-font-size".
     in C:\buyboost\assets\sass\general.sass (line 13, column 14)

module.exports = withPlugins([
   [sass, {
       cssModules: true,
       cssLoaderOptions: {
           importLoaders: 1,
           includePaths: [
               path.join(__dirname, '/assets/sass/'),
               path.join(__dirname, '/node_modules/'),
           ],
           data: '@import "vars.scss";',
       }
   },
       [PHASE_DEVELOPMENT_SERVER, PHASE_PRODUCTION_BUILD]]
], nextConfig);

тут sassLoaderOptions

а ты cssLoader

   [PHASE_DEVELOPMENT_SERVER, PHASE_PRODUCTION_BUILD]]

и это тоже не нужно указывать

вот я сделал

module.exports = withPlugins([
   [sass, {
       sassLoaderOptions: {
           importLoaders: 1,
           includePaths: [
               path.join(__dirname, '/assets/sass/'),
               path.join(__dirname, '/node_modules/'),
           ],
           data: '@import "vars.scss";',
       }
   }
], nextConfig]);
Пишит ошибку
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

и на какой именно файл

./assets/sass/general.sass 1:0

у тебя такая реакция

general.sass, а в нем че

sass стили с переменными которые должны быть в vars.scss

ты там сам их импортиришь  или ошибка автоматом падает?

в нем нечего нет кроме стилей

importLoaders: 1 это че?

тебе нужно будет подклчають отдельный css лоадер, если у тебя каким-то образом что-то подключается css файлы

да мне просто надо подключить sass стили в каждом компаненте и чтобы у глобальных sass стилей не было скопов, и чтобы можно было переменные использовать