title: How do I make Next deal with regular CSS files in addition to SCSS files?
body: <p>Right now, I have a Next config file that looks like this:</p>
  
  <pre><code>const withSass = require('@zeit/next-sass')
  
  module.exports = withSass({
    cssModules: true,
    webpack: config =&gt; {
      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
    }
  })
  </code></pre>
  
  <p>And using SCSS modules works just fine. But, I am adding in Reach UI's @reach/dialog, which requires you to include their styles.css file, and I get this error when I do:</p>
  
  <pre><code>./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. */
  &gt; :root {
  |   --reach-dialog: 1;
  | }
  </code></pre>
  
  <p>How do I configure my app to deal with this, while keeping the SCSS working? Do I have to install next-css in addition to next-sass? How do I use both, if so? Is something else going on that I'm missing? </p>