Impossible to create styles for each component #13109

mlbonniec · 2020-05-19T19:16:24Z

mlbonniec
May 19, 2020

Bug report

All styles must be included in _app.js and therefore be global. I include my .scss files, but they must be global.
It seems that this tutorial is what I'm looking for, but you have to add a variable as a class to make it work, and as indicated in the post, it's no longer compatible with the new versions of Next.JS https://medium.com/@vladymyr.pylypchatin/the-simple-way-to-use-scoped-and-global-scss-with-next-js-67cdb2d0c676
I also tried @webdeb/next-styles but the styles are not unique to the component. They are applied by all HTML elements, even when the component is not displayed.

Expected behavior

I would like to be able to use .scss files to be included in every component and page, so that I can use the style only when the component is rendered in the page.

System information

OS: macOS
Browser: Firefox
Version of Next.js: Latest, 9.4.1
Version of Node.js: v12.16.1

I need help, thanks

jamesmosier · 2020-05-20T00:43:02Z

jamesmosier
May 20, 2020

There are numerous issues like this already:

#12925
#12079

#12079 will cover what you are mentioning.

0 replies

mlbonniec · 2020-05-20T08:23:35Z

mlbonniec
May 20, 2020
Author

Ok I see, but with next/sass or next-styles I was able to import my styles into the .js file of the component.
However, the style also applies to other elements, even when the component is not present.
How can I make the component style apply only when the component is displayed?
In the manner of a <style jsx></style> tag that inserts itself into the <head>

0 replies

jamesmosier · 2020-05-20T13:54:48Z

jamesmosier
May 20, 2020

So you are looking for component scoped scss?

import app from '../app.module.scss'
function Index() {
  return (
    <div className={app.foo}>hi</div>
  )
}

app.module.scss

.foo {
  background: red;
}

5 replies

ankit-gupta1307 Jun 18, 2020

Hi @jamesmosier I want to use it in a similar fashion but my nested scss is not working. If you are aware then please reply.

ankit-gupta1307 Jun 18, 2020

Also, when I am using nested scss globally(i.e by importing the scss file in _app.js) then it's working.

jamesmosier Jun 18, 2020

hi @ankit-gupta1307! feel free to open up a new Discussion with a code sample of what you are looking to do! that might be easiest to get all the information about what you are trying to accomplish 😄

ankit-gupta1307 Jun 18, 2020

Okay, thanks for the quick reply.

ankit-gupta1307 Jun 18, 2020

@jamesmosier Please check this #14333

mlbonniec · 2020-05-20T15:08:10Z

mlbonniec
May 20, 2020
Author

Yeah, that's pretty much what I want. But isn't there a way to do this without adding the variable as a class?
Let's say I want to put a background-color: red; to the <body></body>, just on a specific page. My body tag is directly in _document.js. So I can't use scoped styles ?

0 replies

smurrayatwork · 2020-05-20T17:55:04Z

smurrayatwork
May 20, 2020

For anyone else that's trying to use this with dart sass' js implementation for things like @use support and sass modules, if you have -any- other node module that has a dependency on node-sass, the default next setup will use node-sass instead of sass. Locally I've fixed it by doing the following:

// example next.config.js
module.exports = {
webpack(config, options) {
  config.module.rules.forEach(rule => {
          if (rule.oneOf) {
            const nestedScss = rule.oneOf.find((one) => {
              return one.test
                && 'some.scss'.match(one.test) 
                && one.issuer 
                && one.issuer.include 
                && one.issuer.include.includes('_app');
            });
            if (nestedScss) {
              const sassLoader = nestedScss.use.find(u => u.loader.includes('sass-loader'));
              // Set implementation to sass instead of node-sass here.
              sassLoader.options.implementation = require('sass');
            }
          }
        })
  }
}

You'll then need to import your scss files in _app.js.

0 replies

Impossible to create styles for each component #13109

Uh oh!

Bug report

Expected behavior

System information

Replies: 5 comments · 5 replies

Uh oh!

Uh oh!

mlbonniec May 20, 2020 Author

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

mlbonniec May 20, 2020 Author

Uh oh!

Replies: 5 comments 5 replies

mlbonniec
May 20, 2020
Author

mlbonniec
May 20, 2020
Author