isomorphic-style-loader example

[timmywil]

Would you welcome an isomorphic-style-loader example–the loader used in react-starter-kit–or is there a reason it hasn't been done yet? I think it would be matter of adding a css loader to next.config.js and either setting/concating the styles property for the head tag in _document.js or creating a separate style tag in _document.js for non-styled-jsx styles.

I don't want to attempt it if it's already been tried and discarded.

[timmywil]

I started working on this, but it's more complicated than I thought. next is doing some pretty special things in webpack. For instance, CSS loaders seem to be completely ignored when writing output to the .next directory. Even the extract webpack plugin isn't writing to dist. Any guidance would be appreciated. I'm just not familiar with all of the webpack plugins being used here.

[timmywil]

Ok, finally read this. Hmmm.

[lenny0702]

Looking foward to that so much! Hope you can make it!
I tried that, but didn't wok out. We need this very much.

[timmywil]

I'm going to work on this more when I have time. I will need to spend more time understanding the next code.

[winglian]

@timmywil I'm interested in seeing this as well. One major piece of plumbing is the context.insertCss which has to be passed as a prop to the App container at some point. I've been going through next/server/render and next/lib/app to see if there are any good starting points to making this modular/userland without modifying next itself, but it isn't looking promising

[winglian]

@timmywil as for the css loaders writing out to .next/dist, I've come up with this so far, but then it fails since it has a relative path in the output file that can't be resolved properly. That's one of the last pieces I think that I need to get it to work. Here's what I have in next.config.js

module.exports = {
  webpack: (config, { dev }) => {
    const isDebug = !!dev;

    config.module.rules.push({
      test: /\.scss$/,
      use: [
        'isomorphic-style-loader',
        'raw-loader',
        {
          loader: 'emit-file-loader',
          options: {
            name: 'dist/[path][name].[ext]'
          }
        },
        {
          loader: 'css-loader',
          options: {
            // CSS Loader https://github.com/webpack/css-loader
            importLoaders: 1,
            sourceMap: isDebug,
            // CSS Modules https://github.com/css-modules/css-modules
            modules: true,
            localIdentName: isDebug ? '[name]-[local]-[hash:base64:5]' : '[hash:base64:5]',
            // CSS Nano http://cssnano.co/options/
            minimize: !isDebug,
            discardComments: { removeAll: true },
          },
        },
        'postcss-loader',
      ]
    })

    return config
  }
}

and the output that I get in .next/dist/components/Hero/Hero.scss that has the invalid relative path is

exports = module.exports = require("../../node_modules/css-loader/lib/css-base.js")(true);
// imports


// module
exports.push([module.id, ".Hero-heroHeader-Wc-hV {\n    height: 200px; }\n\n@media (min-width: 576px) {\n    .Hero-heroHeader-Wc-hV {\n        height: 240px; }  }\n\n@media (min-width: 768px) {\n    .Hero-heroHeader-Wc-hV {\n        height: 300px; }  }\n\n@media (min-width: 1200px) {\n    .Hero-heroHeader-Wc-hV {\n        height: 350px; }  }\n\n@media (min-width: 1440px) {\n    .Hero-heroHeader-Wc-hV {\n        height: 400px; }  }\n\n\n\n", "", {"version":3,"sources":["/Users/wing/Projects/Personal/app-web/components/Hero/Hero.scss"],"names":[],"mappings":"AAAA;IACI,cAAc,EAAE;;AAEpB;IACI;QACI,cAAc,EAAE,GAAG;;AAC3B;IACI;QACI,cAAc,EAAE,GAAG;;AAC3B;IACI;QACI,cAAc,EAAE,GAAG;;AAC3B;IACI;QACI,cAAc,EAAE,GAAG","file":"Hero.scss","sourcesContent":[".heroHeader {\n    height: 200px; }\n\n@media (min-width: 576px) {\n    .heroHeader {\n        height: 240px; }  }\n@media (min-width: 768px) {\n    .heroHeader {\n        height: 300px; }  }\n@media (min-width: 1200px) {\n    .heroHeader {\n        height: 350px; }  }\n@media (min-width: 1440px) {\n    .heroHeader {\n        height: 400px; }  }\n\n\n\n"],"sourceRoot":""}]);

// exports
exports.locals = {
	"heroHeader": "Hero-heroHeader-Wc-hV"
};

[timmywil]

@winglian Thanks! I think adding emit-file-loader is a step in the right direction. I'll look further asap.

[sergiokopplin]

@timmywil @winglian yeah, i also want this! can i help with something? have you checked @timmywil?

[timmywil]

@sergiokopplin I should have some time today. I'll reply here again with any discoveries, or I'll just open a PR if I get it working.

[sergiokopplin]

thanks man! let's get this to work!

[sergiokopplin]

btw, are you trying to use in a simple css-modules way?

component that imports a style and apply on nodes?
example:

[timmywil]

@sergiokopplin exactly

[sergiokopplin]

I'm not going with next because of this. :/
Still need to do some tests, but this is a big no for my team.

[timmywil]

I started this and opened a PR for collaboration.

#1664

I can get either server rendering or client rendering to work correctly, but not both at the same time and I'm not sure why yet.

[codinronan]

Watching this with interest. I love next but I think we are going to pass until we can use the most common (e.g.: standard) css solutions...

[rauchg]

The CSS standard is what <style jsx> supports. Would you mind expanding @codinronan on what part of the standard is not supported?

[codinronan]

@rauchg I don't want to use css-in-js. We've built a number of solutions with that; it is overkill for what I need to build right now. I'd like to use SASS but without being able to add a css loader, that's a no-go. I can build it manually, perhaps even set up a side process to watch it. Not a big deal I guess.

I'd love to see you guys support a solution like that out of the box. Next blows everything else out of the water.

[bryandowning]

I'm hoping that the following two PRs in styled-jsx combined with some of the techniques used in examples/with-global-stylesheet will allow us to use SCSS (or whatever else) in an easy way.

• Add support for plugins styled-jsx#190
• Add external StyleSheets support styled-jsx#148
• https://github.com/zeit/next.js/tree/v3-beta/examples/with-global-stylesheet

For example:

import stylesheet from './Page.scss'
...
<style jsx>{stylesheet}</style>

I'm thinking you could use babel to transform SCSS files to a string, then dump that string to styled-jsx, provide a pre-process function, and let styled-jsx handle the scoping, autoprefixing, minifying, ensuring only one block of CSS is used for each component, etc

Fingers crossed! This would be a pretty awesome CSS setup!

[dvakatsiienko]

Entire our team struggling with not supported scss modules by next.js. We have completely complex scss structure and we basically can't refuse it in favor of styled-jsx. The funny thing is that unsupported scss modules is the only but the crucial thing which stops us from migrating to next.js.
@timmywil, thank you for your great work, really hope you'll manage to integrate isomorphic-style-loader successfully

[sergiokopplin]

@dvakatsiienko same here!

[cr101]

Personally, I'd love to be able to create a custom build of a CSS framework like Bootstrap 4 or Foundation and then import global and local scoped SCSS files.
So rather than importing the entire CSS framework, import the CSS framework's core .scss files as global CSS and then import the individual SCSS components as local scoped CSS.
Only importing the .scss files you need instead of the entire CSS framework would greatly reduce the size of the pages by only shipping the code that you need.

[dvakatsiienko]

Found this davibe/next.js-example-with-global-stylesheet#8
the discussion just yet, guys created some setup that makes me believe that it is possible to make next.js to work with scss

[pencilcheck]

Some slight changes I propose to example that would make it much easier: #2382

[radeno]

@winglian same issue, i have tried resolve wrong paths with babel-plugin-module-resolver but with no positive results. I think and hope there is not so much effort to handle this issue. Yet still just with raw-loader and postcss-loader. Using babel-loader for CSS doesn't work well with some postcss plugins.

[agurtovoy]

@dvakatsiienko Would https://github.com/moxystudio/next.js-style-loader be of any help? It's been recently deprecated as the original creators moved away from next.js, but it works for us (we use it with CSS modules, not SCSS, though).

[dvakatsiienko]

@agurtovoy did't tried that yet, and I'll do. Thank you very much for a suggestion!

[NotJustClarkKent]

For what it's worth, I spent 2 days trying to get .scss files to work as imports/css-modules with no luck after going through all the various examples, gists and SO posts. Given the importance of this feature we had to drop Next for ReactQL which supports this "out of the box" and has worked out very well for us. I have no affiliation with ReactQL but I would recommend others with this issue have a look.

[codinronan]

@NotJustClarkKent are you talking about isomorphic-style-loader specifically, or .scss files in general?

FWIW using the latest Next 4, along with styled-jsx-plugin-sass I have bootstrap's SCSS along with all of our own functioning just fine. It only took maybe ~1 hour to get everything working the way I wanted to.

Given the way Next works, isomorphic-style-loader itself is not particularly necessary.

[NotJustClarkKent]

@codinronan specifically .scss files next to components UserBar.js, UserBar.scss (not the isomorphic-style-loader specifically although this was one of the methods I tried). The goal was to import the .scss styles and have them load as CSS Modules scoped to the component that imported it. I could not get this working over the 2 days of work I put in.

I was sort of able to get global scss files working using the externally global scope example and this thread but found that sometimes it would generate the .css to the static folder and sometimes it wouldn't. Often I would just get a comment /* imported from ... */ and nothing else. Other times I'd see the generated CSS for either the route requested only but the imported style class was never added/applied to the element (<h3 className={styles.example}>Foo</h3> would just render as <h3>Foo</h3> even when the CSS did generate and I didn't have any build errors.