question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Next 6 breaks styled-jsx with sass plugin

See original GitHub issue
  • [X ] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

Should be able to upgrade next 6 and still use styled-jsx with sass

Current Behavior

Working with next 5.1.0 upgrading to next 6 breaks importing a scss file to be used in styled-jsx example

import style from ‘./componentName.scss’;

in component: <styled jsx>{style}</style>

On next 6 I get ‘style is undefined’

package.json “extract-text-webpack-plugin”: “^3.0.2”, “extracted-loader”: “^1.0.3”, “node-sass”: “^4.7.2”, “postcss”: “^6.0.16”, “postcss-cssnext”: “^3.0.2”, “postcss-loader”: “^2.0.10”, “sass-loader”: “^6.0.6”, “styled-jsx-css-loader”: “^0.3.0” “styled-jsx-plugin-sass”: “^0.2.2”, “autoprefixer”: “^8.2.0”,

babelrc

  "presets": [
    [
      "next/babel",
      {
       "preset-env": { "modules": "commonjs" }
      }
    ]
  ],
  "plugins": [
    [
      "styled-jsx/babel",
      { "plugins": [
          ["styled-jsx-plugin-sass", {
              "sassOptions": {
                "includePaths": ["./styles"],
                "precision": 2
              }
            }
          ]
        ]
      }
    ]
  ]
}
```

next.config.js
```const ExtractTextPlugin = require('extract-text-webpack-plugin');

const dev = process.env.NODE_ENV !== 'production';
const path = require('path');
const getRoutes = require('./routes');

module.exports = {
  exportPathMap: getRoutes,
  webpack: (config) => {
    config.module.rules.push({
      test: /\.scss$/,
      use: [
        {
          loader: 'emit-file-loader',
          options: {
            name: 'dist/[path][name].[ext]',
          },
        },
        'babel-loader',
        'styled-jsx-css-loader',
        'postcss-loader',
      ],
    });
    return config;
  },
};```
## Steps to Reproduce (for bugs)
<!--- Provide a link to a live example, or an unambiguous set of steps to -->
<!--- reproduce this bug. Include code to reproduce, if relevant -->
1.
2.
3.
4.

## Context
<!--- How has this issue affected you? What are you trying to accomplish? -->
<!--- Providing context helps us come up with a solution that is most useful in the real world -->

## Your Environment
<!--- Include as many relevant details about the environment you experienced the bug in -->
| Tech    | Version |
|---------|---------|
| next    |    6     |
| node    |      8.10.0   |
| OS      |    mac and windows     |
| browser |         |
| etc     |         |

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Reactions:3
  • Comments:22 (8 by maintainers)

github_iconTop GitHub Comments

github_iconTop Results From Across the Web

Next 6 breaks styled-jsx with sass plugin · Issue #4265 - GitHub
scss ; an scss file with theme settings in most of our components and, only after deploying the application, the layout completely breaks....
Read more >
@styled-jsx/plugin-sass - npm
Plugin to add Sass support to styled-jsx. Latest version: 4.0.2, last published: a year ago. Start using @styled-jsx/plugin-sass in your ...
Read more >
Styled Jsx: Full CSS Support for JSX without Compromises
Styled Jsx : Full CSS Support for JSX without Compromises. Full, scoped and component-friendly CSS support for JSX (rendered on the server or...
Read more >
Comparing Styling Methods In Next.js - Smashing Magazine
Next.js also allows styling with SASS with the .sass or .scss extension. Installing Sass is a requirement. Just like global styles, ...
Read more >
Next.js Practical Introduction Pt. 2: Styling and Theming - Auth0
CSS rules are written inside a template string that is placed within the style jsx tag. You write the rules the same way...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found