css - 除了 SCSS 文件，我如何让 Next 处理常规 CSS 文件？

Question

现在，我有一个 Next 配置文件，如下所示：

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
  }
})

并且使用 SCSS 模块工作得很好。但是，我在 Reach UI 的 @reach/dialog 中添加，它要求您包含他们的 styles.css 文件，当我这样做时会出现此错误：

./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;
| }

如何配置我的应用程序来处理这个问题，同时保持 SCSS 正常工作？除了 next-sass，我还必须安装 next-css 吗？如果可以，我如何同时使用两者？还有什么我想念的吗？

标签： csswebpacksassnext.js