मैं एक साधारण नेक्स्टजेएस ऐप पर काम कर रहा हूं, लेकिन मुझे एसएएसएस/एससीएसएस का उपयोग करके घटक स्तर की स्टाइलिंग में परेशानी हो रही है। जब उपयोगकर्ता पहली बार पृष्ठ पर आता है तो सब कुछ ठीक दिखता है, लेकिन जब उपयोगकर्ता किसी पृष्ठ पर नेविगेट करता है /about उदाहरण के लिए या /about से / तक, घटक शैलियों को रेंडर नहीं मिला, शैलियों को देखने के लिए उपयोगकर्ता को पृष्ठ को रीफ्रेश करने की आवश्यकता है

⚙️ सेटिंग

./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/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/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;
}
2
Neo Genesis 19 मार्च 2020, 10:12

1 उत्तर

सबसे बढ़िया उत्तर

इस तरह मैं अपनी समस्या को ठीक करता हूं। 🎉

Next.js 9.3 के रिलीज़ होने के साथ, @zeit/next-sass और @zeit/next-css की कोई आवश्यकता नहीं है।
मैं निम्नलिखित भी करता हूं:

  • styled-jsx-plugin-sass node-sassa को dev-dep . के रूप में जोड़ें
  • एक .babelrc फ़ाइल बनाएँ और निम्नलिखित जोड़ें:
{
  "presets": [
    [
      "next/babel",
      {
        "styled-jsx": {
          "plugins": ["styled-jsx-plugin-sass"]
        }
      }
    ]
  ]
}

तो मेरे पास ऐसा करने के लिए दो विकल्प हैं:

  • <style jsx> पर my sass/scss जोड़ें
  • मेरे घटक sass/scss फ़ाइल का नाम बदलकर <ComponentName>.module.scss कर दें

दूसरा विकल्प ए में दर्द है, आपको import styles from './ComponentName.module.scss और तत्व वर्ग को className={styles.ComponentName} या className={styles['ComponentName-button']} के रूप में जोड़ना होगा। 🧐

3
Neo Genesis 20 अप्रैल 2020, 06:28