How can I have a separate CSS or SASS folder?

[Itagiba]

I am using your CSS example to add postcss to my project but unless I put my css inside the ./pages folder I get an undefined error.

import {stylesheet, classNames} from 'css/styles.css'

I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

For the paragraph class from styles to render.

.paragraph { composes: font-color from 'global.css'; font-size: 20px; color:red; }

Current Behavior

ERROR  Failed to compile with 1 errors    

This dependency was not found:

* css/styles.css in ./pages?entry

To install it, you can run: npm install --save css/styles.css

My next.config.js file is as follows:

const fs = require('fs')
const trash = require('trash')

module.exports = {
  webpack: (config) => {
    config.plugins = config.plugins.filter(
      (plugin) => (plugin.constructor.name !== 'UglifyJsPlugin')
    )

    config.module.rules.push(
      {
        test: /\.css$/,
        use: [
          {
            loader: 'emit-file-loader',
            options: {
              name: 'dist/[path][name].[ext]'
            }
          },
          {
            loader: 'skeleton-loader',
            options: {
              procedure: function (content) {
                const fileName = `${this._module.userRequest}.json`
                const classNames = fs.readFileSync(fileName, 'utf8')

                trash(fileName)

                return ['module.exports = {',
                  `classNames: ${classNames},`,
                  `stylesheet: \`${content}\``,
                  '}'
                ].join('')
              }
            }
          },
          'postcss-loader'
        ]
      }
    )

    return config
  }
}

The only time this works is if I add all the CSS files inside the ./pages directory which I find will become messy and bloated. I am using React.js with Next.js. I presume the same problems will arise if I add an ./assets folder at the same level as ./pages. How can I keep the file types separated and/or for <style dangerouslySetInnerHTML={{__html: stylesheet}} /> to render an external stylesheet instead of styles?

[timneutkens]

Are you using any of the predefined examples on how to use imported styling?
https://github.com/zeit/next.js#faq

How do I use CSS preprocessors like SASS / SCSS / LESS?

[Itagiba]

Yes, this one: https://github.com/zeit/next.js/tree/master/examples/with-scoped-stylesheets-and-postcss. As per above. For some reason I cannot place the stylesheets in a folder outside of ./pages

[timneutkens]

cc @thomaslindstrom

[thomaslindstrom]

I just tried this myself and there seems to be an issue with your configuration.

This worked as expected.

[timneutkens]

Okay great, thanks for checking @thomaslindstrom ❤️

[lock]

This thread has been automatically locked because it has not had recent activity. Please open a new issue for related bugs and link to relevant comments in this thread.