Следующая JS уровень компонента SASS - PullRequest
Новая
       49

Следующая JS уровень компонента SASS

1 голос
/ 19 марта 2020

Я работаю над простым приложением Next JS, но у меня возникают проблемы со стилем на уровне компонентов с использованием SASS / S CSS. Все выглядит хорошо, когда пользователь впервые попадает на страницу, но когда пользователь переходит на страницу, например /about или с /about на /, стили компонента не получают визуализацию, пользователь должен обновить sh страница для просмотра стилей ?

⚙️ НАСТРОЙКИ

./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;
}

1 Ответ

0 голосов
/ 20 апреля 2020

Вот как я исправляю свою проблему. 100

С выпуском 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"]
        }
      }
    ]
  ]
}

Таким образом, у меня есть два варианта:

  • добавить мой sass / s css в <style jsx>
  • переименовать мой компонентный файл sass / s css в <ComponentName>.module.scss

Второй вариант - это боль в A, вам нужно import styles from './ComponentName.module.scss и добавить класс элемента как className={styles.ComponentName} или className={styles['ComponentName-button']}. ?

...