Webpacker: `No PostCSS Config found` in production

Created on 28 Jun 2017 · 5Comments · Source: rails/webpacker

It makes sense to specify path to .postcssrc.yml explicitly. It's looked for in parent directories relative to asset being built. And if your asset is in node_modules and your node_modules is symlinked between releases (which is a reasonable thing to do on production), it fails with:

       /home/u1/app/shared/~/css-loader!/home/u1/app/shared/~/postcss-loader!/home/u1/app/shared/~/sass-loader/lib/loader.js!/home/u1/app/shared/~/eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.css
       Module build failed: Error: No PostCSS Config found in: /home/u1/app/shared/node_modules/eonasdan-bootstrap-datetimepicker/build/css
           at Error (native)
           at /home/u1/app/shared/node_modules/postcss-load-config/index.js:51:26
        @ /home/u1/app/shared/~/eonasdan-bootstrap-datetimepicker/build/css/bootstrap-da
tetimepicker.css 4:14-154
        @ ./app/webpack/application/posts.js
        @ ./app/webpack/packs/application.js

And the way to fix it is:

    use: ['css-loader', {
      loader: 'postcss-loader',
      options: {
        config: '.postcssrc.yml',
      },
    }, 'sass-loader'],

in config/webpack/loaders/sass.js.

help wanted

Source

x-yuri

Most helpful comment

@x-yuri Does this work?

const ExtractTextPlugin = require('extract-text-webpack-plugin')
const path = require('path')

const { env } = require('../configuration.js')
const postcssConfig = path.resolve(process.cwd(), '.postcssrc.yml')

module.exports = {
  test: /\.(scss|sass|css)$/i,
  use: ExtractTextPlugin.extract({
    fallback: 'style-loader',
    use: [
      { loader: 'css-loader', options: { minimize: env.NODE_ENV === 'production',  } },
      { loader: 'postcss-loader', options: { sourceMap: true, config: { path: postcssConfig } } },
      'resolve-url-loader',
      { loader: 'sass-loader', options: { sourceMap: true } }
    ]
  })
}

gauravtiwari on 30 Jun 2017

❤9

All 5 comments

@x-yuri Does this work?

const ExtractTextPlugin = require('extract-text-webpack-plugin')
const path = require('path')

const { env } = require('../configuration.js')
const postcssConfig = path.resolve(process.cwd(), '.postcssrc.yml')

module.exports = {
  test: /\.(scss|sass|css)$/i,
  use: ExtractTextPlugin.extract({
    fallback: 'style-loader',
    use: [
      { loader: 'css-loader', options: { minimize: env.NODE_ENV === 'production',  } },
      { loader: 'postcss-loader', options: { sourceMap: true, config: { path: postcssConfig } } },
      'resolve-url-loader',
      { loader: 'sass-loader', options: { sourceMap: true } }
    ]
  })
}

gauravtiwari on 30 Jun 2017

❤9

@gauravtiwari This worked for me. Thank you.