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:
- Created 5 years ago
- Reactions:3
- Comments:22 (8 by maintainers)
Top 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 >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
You may check this package: https://github.com/zeit/next-plugins/tree/master/packages/next-sass
@giuseppeg it looks pass. https://github.com/blackbing/styled-jsx/commit/0feb15f5be267571583a459033bdb6696cef9c80 or do I miss something?