Doesn't work with latest styled-jsx

[Yuripetusko]

Hi,

It doesn't seems to work with latest code in styled-jsx master branch which allows for external files

https://github.com/zeit/styled-jsx/commit/02e203fe122f40b8a0a927aae81197724524ccb8

i guess they probably do some kind of babel transpiling of files on the fly of their own? this is kind of string I get when trying to import file with latest styled-jsx:

[davibe]

Unfortunately I am not working on this kind of stuff (web) anymore so i am afraid i won't be able to help much, at least not until I will be back on a web project. Sorry

[tgoldenberg]

Really too bad, since I was loving using scss with Next.js. Since the security update, I have to upgrade 2.4.1, and can't figure out how to fix the scss loading. Hope that someone is able to come along and adapt the solution.

[tgoldenberg]

Logged my fix here @Yuripetusko

[tgoldenberg]

Actually, getting the same error again. Unsure what the issue is.

[tgoldenberg]

@Yuripetusko, have you found any solution?

[Yuripetusko]

@tgoldenberg yes we did, not sure what exactly helped us exactly. This is content of next.config.js

config.module.rules.push(
      {
        test: /\.(css|styl)/,
        loader: 'emit-file-loader',
        options: {
          name: 'dist/[path][name].[ext]',
        },
      },
      {
        test: /\.css$/,
        use: [
          'babel-loader',
          'raw-loader',
        ],
      },
      {
        test: /\.styl$/,
        use: [
          'babel-loader',
          'raw-loader',
          {
            loader: 'stylus-loader',
            options: {
              sourceMap: false,
              includePaths: ['styles', 'node_modules', 'components']
                .map(d => path.join(__dirname, d))
                .map(g => glob.sync(g))
                .reduce((a, c) => a.concat(c), []),
            },
          },
        ],
      }
    );

This is content of babelrc:

"presets": ["next/babel"],
      "plugins": [
        "inline-react-svg",
        [
          "transform-define",
          "./scripts/env-config.js",
        ],
        [
          "module-resolver", {
            "root": ["."],
            "alias": {
              "styles": "./styles",
              "components": "./components",
              "generic": "./components/generic",
              "svg": "./components/svg",
              "lib": "./lib"
            },
            "cwd": "babelrc"
        }],
        [
          "wrap-in-js",
          {
            "extensions": ["css$", "styl$"]
          }
        ]
      ]

And here's postcss.config.js

module.exports = {
  plugins: [
    require('postcss-easy-import')({ prefix: '_' }), // keep this first
    require('postcss-cssnext')(
      {
        /* ...options */
      }
    ),
    require('cssnano')({
      preset: 'default',
    }),
  ],
};

And we import files like so:

import ComponentStyles from './checklist-tool-header.styl';
<style jsx>{ComponentStyles}</style>

or sometimes

<style jsx global>{ComponentStyles}</style>

[Yuripetusko]

"next": "3.0.0-beta10",

[tgoldenberg]

@Yuripetusko were you able to get postcss-loader to work as well? Seems that your setup works except with postcss-loader

[dvakatsiienko]

Hello, guys! @Yuripetusko @tgoldenberg noticed that you came up with a solution how to make work next.js with scss in a good way! Your solution looks really awesome! this is exactly what I'm trying to setup. I see some configs commented by @Yuripetusko but they include some files that are not highlighted here, like ./scripts/env-config.js, in .babelrc for example. Could you please share a basic full example how to make this work?

[ilionic]

@dvakatsiienko env-config not related to styles setup so you could ignore it. ( just defining some app config globals)