How to inline CSS in the head tag of a NextJS project?

问题

My NextJS project has the following Webpack configuration:

import path from 'path';
import glob from 'glob';
import ExtractTextPlugin from 'extract-text-webpack-plugin';
import webpack from 'webpack';
import dotenv from 'dotenv';
import OptimizeCSSAssetsPlugin from 'optimize-css-assets-webpack-plugin';

import withSass from '@zeit/next-sass';

dotenv.config();

module.exports = withSass({
  distDir: '.build',
  webpack: (config, { dev, isServer }) => {
    if (isServer) {
      return config;
    }
    config.plugins.push(
      new webpack.optimize.LimitChunkCountPlugin({
        maxChunks: 1,
      }),
    );
    config.optimization.minimizer.push(
      new OptimizeCSSAssetsPlugin({}),
    );
    return config;
  },
});

This allows me to just import any number of scss files in any page and have them all bundled together, minified as a single file, and served thus:

<link rel="stylesheet" href="/_next/static/css/styles.84a02761.chunk.css">

However, instead of <link>, I'd very much prefer to have the style definitions inlined into my <head> tag as <style></style>. Is it possible without piling up a ton of third-party modules?

If not, is it possible to at least change the resulting <link>'s rel to preload from stylesheet and also add add as="style" crossorigin to it?

回答1:

I managed to successfully inline my CSS by slightly tweaking the pages/_document.jsx file. I extended the <Head> component natively provided with NextJS and added it to my custom document markup. Here's a partial representation of my modifications:

import { readFileSync } from 'fs';
import { join } from 'path';

class InlineStylesHead extends Head {
  getCssLinks() {
    return this.__getInlineStyles();
  }

  __getInlineStyles() {
    const { assetPrefix, files } = this.context._documentProps;
    if (!files || files.length === 0) return null;

    return files.filter(file => /\.css$/.test(file)).map(file => (
      <style
        key={file}
        data-href={`${assetPrefix}/_next/${file}`}
        dangerouslySetInnerHTML={{
          __html: readFileSync(join(process.cwd(), '.build', file), 'utf-8'),
        }}
      />
    ));
  }
}

class MyDocument extends Document {
  render() {
    return (
      <Html lang="en" dir="ltr">
        <InlineStylesHead>
          <meta name="theme-color" content="#ffcc66" />
        </InlineStylesHead>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

I owe this solution to https://github.com/zeit/next-plugins/issues/238#issuecomment-432211871.

来源：https://stackoverflow.com/questions/57057947/how-to-inline-css-in-the-head-tag-of-a-nextjs-project

标签

Webpack

next.js