Nextjs external css not updating on client side page transitions

Marvin_1003

I am still new to nextjs so i don't know if this is a bug or if i just wrongly implemented it.

I successfully managed to extract all my scss files using this guide: https://github.com/zeit/next-plugins/tree/master/packages/next-sass

Everything works just fine while using server side rendering. External css file gets properly updated and applied, but as soon as i do client side page transitions the new scss import doesnt get injected in the external css file. I also dont want to prefetch every scss file on the initial pageload it should dynamically fetch and update the external file on server side routing and client side routing.

My next.config.js

const getRoutes = require('./routes');
const path = require('path');
const withSass = require('@zeit/next-sass');

module.exports = withSass({
  exportPathMap: getRoutes,
  // useFileSystemPublicRoutes: false,
  cssModules: true,
  cssLoaderOptions: {
    importLoaders: 1,
    localIdentName: "[local]___[hash:base64:5]",
  },
})

Example Component

import { Fragment } from 'react';
import Main from '../components/main';
import style from '../styles/pages/parkett.scss';

const Parkett = () => 
  <Fragment>
    <section className={`section ${style.sec_two_parkett}`}>
      <div className={`sec_text ${style.sec_two_text}`}>
        <h2 className="didonesque_headline">Detailiert</h2>
        <p className="normal_text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
      </div>
    </section>
    <section className={`section ${style.sec_three_parkett}`}>
      <div className={`sec_text ${style.sec_three_text}`}>
        <h2 className="didonesque_headline">Erstaunlich</h2>
        <p className="normal_text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.</p>
      </div>
    </section>
  </Fragment> 

export default () => 
  <Main 
    title="parkett" 
    component={<Parkett />} 
    links={['Treppe', 'Moebel', 'Innenausbau']}
    />
shi

Hi i would recommend using styled-jsx-css-loader for loading css into jsx it work fine for me and sass loader to converting sass into css and you can chain them like so in the next.config.js file:

config.module.rules.push({
      test: /\.scss$/,
      use: [
        {
          loader: 'emit-file-loader',
          options: {
            name: 'dist/[path][name].[ext].js',
          },
        },
        {
          loader: 'babel-loader',
          options: {
            babelrc: false,
            extends: path.resolve(__dirname, './.babelrc'),
          },
        },
        'styled-jsx-css-loader',
        // optional if you wanna purify css if you are using bootstrap or a huge css lib
        // {
        //   loader: 'css-purify-webpack-loader',
        //   options: {
        //     includes: [
        //       './pages/*.js',
        //       './components/**/*.js',
        //       './containers/**/*.js',
        //     ],
        //   },
        // },
        {
          loader: 'sass-loader',
          options: {
            sourceMap: dev,
          },
        },
      ],
    });

and you import the sass like this:

import commonStyle from '../styles/common/index.scss';
<style jsx global>
 {commonStyle}
</style>

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

Persist query string parameters in NextJS when navigating client side

How to use external typescript libraries on client side?

Blazor (Client-side) StateHasChanged() not updating page

Executing client-side DOM manipulation after static rendering in NextJS

Nextjs & Apollo: Attach cookie to Apollo Client in getInitialProps server side

Using external library classes in client side :GWT

Java RMI:Updating client side objects in the server

Page loading with CSS Transitions

Updating a client side table

How to add HTML code in DNN (from client side i.e., editable mode) with external css file (eg in assets folder)

NuxtJS: external client-side only plugin/component causes error on page refresh

Client side code updating server side code

Nextjs getInitialProps blocked the page rendering in client side?

Nextjs - Inject ContextProvider if running in client side

What is the best way to add page transitions to Nextjs?

React NextJS page navigation with tabs - display not updating correctly

NextJS SSR and Client side state

Sending a POST request in NEXTjs from client side

How to change Server side variables in the client side nextjs

Pass variable from client to server-side in NEXTJS

NextJs - Application error: a client-side exception has occurred

How to set a cookie in client side in NextJS 13?

NextJS server components are running in the client side too

how to get currentUser in client side in nextjs13

Server side rendering with dynamic client side using nextjs App Router

Title not updating in nextjs, tailwind css app

How to only show one part of a web page and hide everything else using CSS on client side Firefox?

No style from turborepo "external" package component imported in NextJS page

NextJS client component inside page