mrchief/cssLoader.js

## cssLoader.js
'use strict' // eslint-disable-line
import ExtractCssPlugin from 'extract-text-webpack-plugin'
import path from 'path'
import postcssFlexbugsFixes from 'postcss-flexbugs-fixes'
import postcssPresetEnv from 'postcss-preset-env'

export default ({ config, stage }) => {
  let cssLoader = [
    {
      loader: 'css-loader',
      options: {
        localIdentName:
          stage === 'prod' ? '[hash:base64:8]' : '[path][name]---[local]',
        minimize: stage === 'prod',
        sourceMap: stage === 'dev',
        url: false
      }
    },
    {
      loader: 'postcss-loader',
      options: {
        // Necessary for external CSS imports to work
        // https://github.com/facebookincubator/create-react-app/issues/2677
        sourceMap: true,
        ident: 'postcss',
        plugins: () => [
          postcssFlexbugsFixes,
          require('postcss-import')(),
          require('postcss-url')(),
          postcssPresetEnv({
            features: {
              'nesting-rules': true
            }
          })
        ]
      }
    }
  ]

  if (stage === 'dev') {
    cssLoader = ['style-loader'].concat(cssLoader)
  } else if (stage === 'prod') {
    cssLoader = ExtractCssPlugin.extract({
      fallback: {
        loader: 'style-loader',
        options: {
          sourceMap: false,
          hmr: false
        }
      },
      use: cssLoader
    })
  }

  return {
    test: /\.css$/,
    oneOf: [
      {
        // only turn on standard global CSS loader for the material directories
        resourceQuery: [
          path.resolve('./node_modules/material-components-web'),
          path.resolve('./node_modules/@material')
        ],
        use:
          stage === 'prod'
            ? ExtractCssPlugin.extract({
                fallback: 'style-loader',
                use: ['style-loader', 'css-loader']
              })
            : ['style-loader', 'css-loader']
      },
      {
        loader: cssLoader
      }
    ]
  }
}

## static.config.js
import React, { Component } from 'react'

import cssLoader from './webpack/cssLoader'
import svgLoader from './webpack/svgLoader'

import pkg from './package.json'

export default {
  bundleAnalyzer: false,
  preact: true,
  extractCssChunks: false,
  siteRoot: 'http://localhost:3000',
  stagingSiteRoot: 'https://pibops.build.pib.dowjones.io',
  getSiteData: () => ({
    siteTitle: 'PIB Ops'
  }),
  getRoutes: async () => [
    ...
  ],
  webpack: (config, { stage, defaultLoaders }) => {
    config.module.rules = [
      {
        oneOf: [
          {
            test: /\.json$/,
            use: [{ loader: 'json-loader' }]
          },
          defaultLoaders.jsLoader,
          svgLoader({ stage, config }),
          cssLoader({ stage, config }),
          {
            test: /\.mdx?$/,
            use: ['babel-loader', 'mdx-loader']
          },
          defaultLoaders.fileLoader
        ]
      }
    ]

    return config
  },
  Document: class CustomHtml extends Component {
    render() {
      const { Html, Head, Body, children } = this.props

      return (
        <Html>
          <Head>
            <meta charSet="UTF-8" />
            <meta version={`${pkg.version}`} />
            <meta
              name="viewport"
              content="width=device-width, initial-scale=1"
            />
          </Head>
          <Body>{children}</Body>
        </Html>
      )
    }
  }
}
	'use strict' // eslint-disable-line
	import ExtractCssPlugin from 'extract-text-webpack-plugin'
	import path from 'path'
	import postcssFlexbugsFixes from 'postcss-flexbugs-fixes'
	import postcssPresetEnv from 'postcss-preset-env'

	export default ({ config, stage }) => {
	let cssLoader = [
	{
	loader: 'css-loader',
	options: {
	localIdentName:
	stage === 'prod' ? '[hash:base64:8]' : '[path][name]---[local]',
	minimize: stage === 'prod',
	sourceMap: stage === 'dev',
	url: false
	}
	},
	{
	loader: 'postcss-loader',
	options: {
	// Necessary for external CSS imports to work
	// https://github.com/facebookincubator/create-react-app/issues/2677
	sourceMap: true,
	ident: 'postcss',
	plugins: () => [
	postcssFlexbugsFixes,
	require('postcss-import')(),
	require('postcss-url')(),
	postcssPresetEnv({
	features: {
	'nesting-rules': true
	}
	})
	]
	}
	}
	]

	if (stage === 'dev') {
	cssLoader = ['style-loader'].concat(cssLoader)
	} else if (stage === 'prod') {
	cssLoader = ExtractCssPlugin.extract({
	fallback: {
	loader: 'style-loader',
	options: {
	sourceMap: false,
	hmr: false
	}
	},
	use: cssLoader
	})
	}

	return {
	test: /\.css$/,
	oneOf: [
	{
	// only turn on standard global CSS loader for the material directories
	resourceQuery: [
	path.resolve('./node_modules/material-components-web'),
	path.resolve('./node_modules/@material')
	],
	use:
	stage === 'prod'
	? ExtractCssPlugin.extract({
	fallback: 'style-loader',
	use: ['style-loader', 'css-loader']
	})
	: ['style-loader', 'css-loader']
	},
	{
	loader: cssLoader
	}
	]
	}
	}
	import React, { Component } from 'react'

	import cssLoader from './webpack/cssLoader'
	import svgLoader from './webpack/svgLoader'

	import pkg from './package.json'

	export default {
	bundleAnalyzer: false,
	preact: true,
	extractCssChunks: false,
	siteRoot: 'http://localhost:3000',
	stagingSiteRoot: 'https://pibops.build.pib.dowjones.io',
	getSiteData: () => ({
	siteTitle: 'PIB Ops'
	}),
	getRoutes: async () => [
	...
	],
	webpack: (config, { stage, defaultLoaders }) => {
	config.module.rules = [
	{
	oneOf: [
	{
	test: /\.json$/,
	use: [{ loader: 'json-loader' }]
	},
	defaultLoaders.jsLoader,
	svgLoader({ stage, config }),
	cssLoader({ stage, config }),
	{
	test: /\.mdx?$/,
	use: ['babel-loader', 'mdx-loader']
	},
	defaultLoaders.fileLoader
	]
	}
	]

	return config
	},
	Document: class CustomHtml extends Component {
	render() {
	const { Html, Head, Body, children } = this.props

	return (
	<Html>
	<Head>
	<meta charSet="UTF-8" />
	<meta version={`${pkg.version}`} />
	<meta
	name="viewport"
	content="width=device-width, initial-scale=1"
	/>
	</Head>
	<Body>{children}</Body>
	</Html>
	)
	}
	}
	}