Load external CSS

I would like to use external CSS with react-static to migrate from create-react-app completely. Actually it is very straightforward to load fonts via the typefaces packages and then adding them via simple module imports. The problem is that those imports require appropiate css-loaders which are not included inside of react-static.

import 'typeface-montserrat'; // typeface-montserrat/index.css

After a few hours of trying I feel closer to the solution and replaced nearly all webpack loaders with a custom toolchain to support those .css imports, but it still does not work properly. I think it would be a good idea to support css imports out of the box, because the setup is not easy and requires extended knowledge about the project itself & the underlying toolchain.

It seems that you have to add the css-loaders before the file-loader (like in create-react-app), so I had to swap all loaders with a custom configuration in a hacky way. The provided webpackConfigurator gives us no option to insert the loaders in a specific order.

I already tried just using the style-loader and css-loader.

Here is my actual static.config.js:

import NODE_MODULES from 'react-static/dist/paths';

export default {
	[...],
	webpack: (webpackConfigurator, { dev }) => {
		webpackConfigurator._config.module.rules = [];
		webpackConfigurator.merge({
			module: {
				rules: [
					{
						test: /\.(js|jsx)$/,
						exclude: NODE_MODULES,
						use: [
							{
								loader: 'babel-loader',
							},
						],
					},
					{
						test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
						loader: 'url-loader',
						options: {
							limit: 10000,
						},
					},
					{
						test: /\.css$/,
						use: [
							'style-loader',
							{ loader: 'css-loader', options: { importLoaders: 1 } },
							{
								loader: 'postcss-loader',
								options: {
									config: {
										path: './postcss.config.js',
									},
								},
							},
						],
					},
					{
						exclude: [/\.js$/, /\.html$/, /\.json$/],
						loader: require.resolve('file-loader'),
						options: {
							name: '[name].[hash:8].[ext]',
						},
					},
				],
			},
		});
	},
};

I also had to configure postcss properly and install some dependencies. Still it does not work yet:

./node_modules/typeface-montserrat/index.css
Module build failed: Error: Expected a backslash preceding the semicolon.

I will go for sleep now, maybe I will get it working tomorrow. Nevertheless, it would be great if react-static would support this out-of-the-box.

[tannerlinsley]

This should be fixed in the latest version. Please upgrade both global and local packages to version 2.0.0

Make sure you import and use the withCssLoader from react-static’s plugins in your static.config.js file:

import axios from 'axios'
//
import withCss from 'react-static/lib/plugins/withCssLoader'
import withFiles from 'react-static/lib/plugins/withFileLoader'

export default {
  getSiteProps: () => ({
    title: 'React Static',
  }),
  getRoutes: async () => {
    const { data: posts } = await axios.get('https://jsonplaceholder.typicode.com/posts')
    return [
      {
        path: '/',
        component: 'src/containers/Home',
      },
      {
        path: '/about',
        component: 'src/containers/About',
      },
      {
        path: '/blog',
        component: 'src/containers/Blog',
        getProps: () => ({
          posts,
        }),
        children: posts.map(post => ({
          path: `/post/${post.id}`,
          component: 'src/containers/Post',
          getProps: () => ({
            post,
          }),
        })),
      },
      {
        is404: true,
        component: 'src/containers/404',
      },
    ]
  },
  webpack: [withCss, withFiles],
}

Then you can simply import css in your js

import './app.css'

[tannerlinsley]

Plugins are for v6 only (which is still in beta). You can see the v6 branch here: https://github.com/nozzle/react-static/tree/v6/