NextJS component level SASS styling

问题

I am working on a simple NextJS app, but I am having trouble with component level styling using SASS/SCSS. Everything looks fine when the user first lands on the page, but when the user navigates to a page /about for example or from /about to /, the component styles didn't get render, the user needs to refresh the page to see the styles 🤔

⚙️ SETTINGS

./package.json

"dependencies": {
  "@zeit/next-css": "1.0.1",
  "@zeit/next-sass": "1.0.1",
  "autoprefixer": "^9.7.0",
  "next": "^9.3.1",
  "node-sass": "4.13.1",
  "react": "^16.13.0",
  "react-dom": "^16.13.0",
  "webpack": "^4.42.0"
}

./next.config.js

const webpack = require('webpack');
const withSass = require('@zeit/next-sass');
const withCss = require('@zeit/next-css');

module.exports = withCss(
  withSass({
    webpack(config) {
      config.module.rules.push({
        test: /\.(eot|woff?2|ttf|otf|svg|png|jpe?g|gif)$/,
        use: {
          loader: 'url-loader',
          options: {
            limit: 100000,
          },
        },
      });
      return config;
    },
  }),
);

./postcss.config.js

const autoprefixer = require('autoprefixer');

module.exports = {
  plugins: [autoprefixer],
};

📄 PAGES

./pages/index.js

import React from 'react';
import Layout from '../components/Layout';
import Home from '../components/Home';

class Index extends React.PureComponent {
  render() {
    <Layout>
      <Home />
    </Layout>
  }
}

export default Index;

./pages/about.js

import React from 'react';
import Layout from '../components/Layout';
import Company from '../components/Company';

class About extends React.PureComponent {
  render() {
    <Layout>
      <Company />
    </Layout>
  }
}

export default About;

📦 COMPONENTS

./components/Layout.js

import React from 'react';
import AppBar from '../AppBar/AppBar';
import './Layout.scss';

class Layout extends React.PureComponent {
  render() {
    const { children } = this.props;

    return (
      <>
        <AppBar />
        <main className="Layout">
          {children}
        </main>
      </>
    );
  }
}

export default Layout;

./components/Layout.scss

.Layout {
  background: #f00;
}

./components/AppBar.js

import Link from 'next/link';
import './AppBar.scss';

export default () => (
  <header className="AppBar">
    <Link href="/">
      <a>Home</a>
    </Link>
    <Link href="/about">
      <a>About</a>
    </Link>
  </header>
)

./components/AppBar.scss

.AppBar {
  background: #0f0;
}

./components/Home.js

import './Home.scss';

export default () => (
  <div className="Home">Home</div>
)

./components/Home.scss

.Home {
  background: #00f;
}

./components/Company.js

import './Company.scss';

export default () => (
  <div className="Company">Company</div>
)

./components/Company.scss

.Company {
  background: #ff0;
}

回答1:

This is how I fix my issue. 🎉

With the release of Next.js 9.3, there is no need for @zeit/next-sass & @zeit/next-css. 👏
I also do the following:

add styled-jsx-plugin-sass node-sassa as dev-dep
create a .babelrc file and add the following:

{
  "presets": [
    [
      "next/babel",
      {
        "styled-jsx": {
          "plugins": ["styled-jsx-plugin-sass"]
        }
      }
    ]
  ]
}

So I have two options to do it:

add my sass/scss on the <style jsx>
rename my component sass/scss file to <ComponentName>.module.scss

The second option is a pain in the A, you need to import styles from './ComponentName.module.scss and add element class as className={styles.ComponentName} or className={styles['ComponentName-button']}. 🧐

来源：https://stackoverflow.com/questions/60752431/nextjs-component-level-sass-styling

标签

node.js

reactjs

Webpack

Sass

next.js