Next js с пользовательским интерфейсом материала и настраиваемой глобальной таблицей стилей - PullRequest
Новая
       105

Next js с пользовательским интерфейсом материала и настраиваемой глобальной таблицей стилей

0 голосов
/ 08 мая 2020

Я использую Next js 9.3 с export для создания сайта stati c. Пользовательский интерфейс материала настроен в соответствии с этой эталонной реализацией (https://github.com/mui-org/material-ui/tree/master/examples/nextjs).

В дополнение к Material UI, у меня есть глобальная таблица стилей style.css, которая заменяет imported на _app.js согласно документации (https://nextjs.org/docs/basic-features/built-in-css-support).

Однако после запуска export, index.html не включает ни CSS из styles.css, а только Material UI. styles.css загружается только как обычная таблица стилей, а не встраивается. Есть ли способ ввести styles.css в index.html, чтобы избежать FOU C?

РЕДАКТИРОВАТЬ Соответствующие части структуры папок по запросу @Dekel: 

├── pages
│   ├── _app.js
│   ├── _document.js
│   ├── index.js
├── public
└── src
    ├── components
    └── styles.css

1 Ответ

0 голосов
/ 08 мая 2020

, если вы ищете, чтобы ваши css файлы были объединены и уменьшены внутри индекса. html таким образом:

Case 0 

// index.html
...
<head>
  <style>
    <!-- your css concat + minified here -->
  </style>
</head>
...

, а не так Global Stylesheets ".

При чтении do c от версии 9.2 (https://nextjs.org/blog/next-9-2#built -in- css -support-for-global-stylesheets ) говорится:

In production, all CSS files will be automatically concatenated into a single minified .css file. This CSS file will be loaded via a <link> tag and automatically injected into the default HTML markup Next.js generates.

Итак, мне не кажется, что вы можете достичь Case 0 с этим решением.

У меня была такая же проблема с FOUC и вот как я справился с моим решением SSR с помощью следующей:

  1. вспомогательной функции для объединения и минимизации файлов, которые мне нужны, с именем prepareInPageCss.js, которые сохраняют модуль js, который возвращает строку с объединенным css, как показано ниже: 
const minify = require('@node-minify/core');
const cleanCSS = require('@node-minify/clean-css');
const fs = require('fs');
const bootstrapOutPutPathName = './static/css/_tempBootstrap.min.js';
const commonOutPutPathName = './static/css/_tempCommon.min.js';
const outputnameCss = './static/css/InPageCssBundle.css';

(async () => {
 try {
   await minify({
     compressor: cleanCSS,
     input: './static/css/bootstrap.min.css',
     output: bootstrapOutPutPathName,
     options: {
       keepSpecialComments: '0'
     }
   });

   await minify({
     compressor: cleanCSS,
     input: './static/css/common.css',
     output: commonOutPutPathName,
     options: {
       keepSpecialComments: '0'
     }
   });

   let bootstrapTempCss = fs.readFileSync(bootstrapOutPutPathName, "utf-8");
   let commonTempCss = fs.readFileSync(commonOutPutPathName, "utf-8");

   fs.writeFileSync(outputnameCss, bootstrapTempCss + commonTempCss);
   fs.writeFileSync(outputname, "const bundledCss=String.raw`" + bootstrapTempCss + commonTempCss + "`; export default bundledCss;");
 } catch (e) {
   console.log(e);
 }
})()
В файле вашего проекта находится структура head, которую я сделал таким образом: 
   import commonCss from '../static/css/InPageCssBundle.js';
   const isDev = ENV === 'development';

   ...
    <title>{title}</title>
    <meta name='description' content={description}/>
    <meta charSet="utf-8"/>
    {isDev ? <>
       <link rel="stylesheet" href="/static/css/bootstrap.min.css"/>
       <link rel="stylesheet" href="/static/css/common.css"/>
     </> :
     <style>
       {commonCss}
     </style>
   }
   ...

Каждый раз, когда я создаю новую сборку, я запускаю node path/to/file/prepareInPageCss.js.

Теперь я не уверен на 100%, что это единственный способ (я реализовал его, пока Next был на 9.0), и я еще не пробовал экспортировать stati c, но надеюсь, что дал вам как минимум запасное решение.

Ура

...