Как сделать SASS доступным для пользовательской реализации Webpack в NextJS? - PullRequest
Новая
       9

Как сделать SASS доступным для пользовательской реализации Webpack в NextJS?

0 голосов
/ 20 ноября 2018

Я пытаюсь использовать sass-resources-loader , чтобы мои переменные SASS были доступны во всех моих файлах SASS, но не похоже, что SASS доступен для этого загрузчика.

Документация пакета next-sass предполагает, что вы можете обернуть объект конфигурации, чтобы сделать sass доступным для него.например withSass ({configHere}).

Однако полученная ошибка говорит о том, что загрузчик SASS недоступен.

Config: 

const path = require('path');
const withSass = require('
@zeit
/next-sass');

const globalSass = [
  path.join(process.cwd(), 'stylesheets/variables/_variables.scss'),
  path.join(process.cwd(), 'stylesheets/tools/_tools.scss')
]

module.exports = withSass({
  webpack: (config, { buildId, dev, isServer, defaultLoaders }) => {
    // Perform customizations to webpack config
    // Important: return the modified config
    config.module.rules.push({
      loader: "sass-resources-loader",
      options: {
        resources: globalSass
      }
    })

    return config
  }
})

Я получаю эту ошибку: 

Module parse failed: Unexpected token (1:15)
You may need an appropriate loader to handle this file type.
> $font-size-base: 14px;
| $font-size-large: ceil(($font-size-base * 1.25));
| $font-size-small: ceil(($font-size-base * 0.85));

@multi ./node_modules/next/dist/client/next-dev

Где $ font-size-base и т. Д. Находятся в файле SASS переменных, обработанном "sass-resources-loader".

Может ли кто-нибудь подсказать, что я тут не так делаю?

1 Ответ

0 голосов
/ 23 ноября 2018

У меня есть пара предложений.

У вас нет теста для вашего правила: 

test: /\.scss$/

Возможно, вам также понадобится форсировать sass-resources-loader для запуска первым, перед другими загрузчиками, используя: 

enforce: 'pre'

Итак, попробуйте эту конфигурацию: 

module.exports = withSass({
  webpack: (config, { buildId, dev, isServer, defaultLoaders }) => {
    config.module.rules.push({
      enforce: "pre",
      test: /\.scss$/,
      loader: "sass-resources-loader",
      options: {
        resources: globalSass
      }
    })

    return config
  }
})

Надеюсь, этобудет работать на вас.

...