Next.js - reagálnak SSR Nem találja modul ./page.scss', ha teszi a szerver (kliens oldalon kiolvasztott működik a mentés után a fájlt)

szavazat
3

Amikor a create-react-appcsomag maga tudja, hogy .scss-files összeállítani .css-files gépelés őket. Akkor tegye import './Header.css';a reagálnak alkatrész fájlokat és a stílust alkalmazunk. Könnyen kezelhető a dev-tools, és hol a stílusok jönnek.

Next.js megpróbált mindenkit, hogy használja Styled-JSX hogy a stíluslapok inline belsejében JSX fájlokat, hasonlóan ahhoz, ahogy webösszetevőkön (vagy polimer) csinálni. Én személy szerint határozottan tetszik ez a megközelítés.

Egyéb problémák:

  • Stílusú-JSX nem támogatja az IDE (Webstorm) (még a munka körül néz szörnyű);
  • Stílusú-JSX nem támogatja az én dev-tools (Chrome) - nincs utalás arra, amit a vonal a stílus határozza meg;
  • Lehetővé teszi, hogy az én forráskódját néz ki, mint egy elrontott rendetlenség;
  • Hogyan közé 3rd party CSS megoldások Styled-JSX? Én most kéne hozzá <link>, hogy én <head>? Mindenért a külső? Hogy van, hogy az optimális használat sávszélesség? Referenciafelvétel fájlok belsejében node_modulesérzi kényelmetlen és rossz is.

Szóval, csak add szabályokat next.config.js, igaz?

module.exports = {
    webpack: (config, { dev }) => {
        config.module.rules.push(
            {
                test: /\.(css|scss)/,
                loader: style-loader!css-loader
            }
        );
        return config
    }
};

És akkor csak import './Page.scss';(Ne aggódj, ez érvényes CSS, még SASS még, tudom, hogy nem tartalmazza a Sass-rakodó itt még nem. Igyekszem egyszerű az első.)

  1. Az oldal frissítése (Server Side kiolvasztott): nem működik,
  2. Mentsd el a fájlt (dinamikusan betöltött mentés után a fájlt): ez a munka (amíg az oldal újratöltődik);
  3. Tartja panaszkodnak a fájl nem található , rengeteg Google találat ott is. Nincs igazi megoldás, hogy a munka ma.

Szóval, miért nem működik ez az SSR?

A kérdést 28/09/2017 13:10
felhasználó
Más nyelveken...                            


1 válasz

szavazat
0

Megjegyezzük, hogy V5 next.js támogatja CSS / Sass / Kevesebb szinte out of the box :

Importálására Css .scss vagy .less általunk létrehozott modulok, amelyek szokásos alapértelmezett szerver oldali renderelés.

Addig a következő szabályokat dolgozott nekem (feltételezve, hogy a .sassfájlok a /stylesdir):

config.module.rules.push(
  {
    test: /\.(css|sass)/,
    loader: 'emit-file-loader',
    options: {
      // this path is relative to the .next directory
      name: 'dist/[path][name].[ext]'
    }
  },
  {
    test: /\.css$/,
    use: ['babel-loader', 'raw-loader', 'postcss-loader']
  },
  {
    test: /\.sass$/,
    use: ['babel-loader', 'raw-loader', 'postcss-loader',
      { loader: 'sass-loader',
        options: {
          includePaths: ['styles', 'node_modules']
            .map((d) => path.join(__dirname, d))
            .map((g) => glob.sync(g))
            .reduce((a, c) => a.concat(c), [])
        }
      }
    ]
  }
)
Válaszolt 05/02/2018 15:28
a forrás felhasználó

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more