Как заставить Next работать с обычными CSS файлами в дополнение к файлам S CSS? - PullRequest
2 голосов
/ 18 февраля 2020

Сейчас у меня есть следующий конфигурационный файл, который выглядит следующим образом:

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

module.exports = withSass({
  cssModules: true,
  webpack: config => {
    config.module.rules.push({
      test: /\.svg$/,
      use: [
        {
          loader: 'babel-loader'
        },
        {
          loader: 'react-svg-loader',
          options: {
            jsx: true // true outputs JSX tags
          }
        }
      ]
    })
    config.plugins = config.plugins || []

    return config
  }
})

И использование модулей S CSS работает просто отлично. Но я добавляю в Reach пользовательский интерфейс @ reach / dialog, который требует от вас включения их стилей. css file, и я получаю эту ошибку, когда делаю:

./node_modules/@reach/dialog/styles.css 4:0
Module parse failed: Unexpected token (4:0)
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
| 
| /* Used to detect in JavaScript if apps have loaded styles or not. */
> :root {
|   --reach-dialog: 1;
| }

Как мне настроить мое приложение чтобы справиться с этим, сохраняя при этом S CSS в работе? Нужно ли устанавливать next- css в дополнение к next-sass? Как я могу использовать оба, если так? Что-то еще происходит, что я скучаю?

...