Open Yuripetusko opened 7 years ago
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
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.
Logged my fix here @Yuripetusko
Actually, getting the same error again. Unsure what the issue is.
@Yuripetusko, have you found any solution?
@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>
"next": "3.0.0-beta10",
@Yuripetusko were you able to get postcss-loader
to work as well? Seems that your setup works except with postcss-loader
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?
@dvakatsiienko env-config
not related to styles setup so you could ignore it. ( just defining some app config globals)
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: