webpacker: autoprefixer / postcss-cssnext don't appear to be prefixing

In one of my .scss files, there is a class with flex: 1 0 0; on it. When I inspect an element having that class in the browser, I don’t see any prefixes applied.

I’ve tried switching to postcss-cssnext, as per #344, but that doesn’t do anything either. I can see prefixes on the CSS assigned to other elements, but I suspect Bootstrap is inserting those itself.

My config/webpack/loaders/sass.js is default, as far as I can see:

const ExtractTextPlugin = require('extract-text-webpack-plugin')
const { env } = require('../configuration.js')

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 } },
      'resolve-url-loader',
      { loader: 'sass-loader', options: { sourceMap: true } }
    ]
  })
}

I’m not sure whether it’s reading the browser list, which I have put in .postcssrc.yml:

plugins:
      postcss-smart-import: {}
      postcss-cssnext:
        browserslist:
          - last 2 versions
          - IE >= 9
          - iOS >= 9
          - > 1%

Is that even the right place to configure it? None of the examples and documentation I can find for PostCSS in the context of a Rails 5.1 application, so it’s a bit difficult to work out where this should go…

About this issue

  • Original URL
  • State: closed
  • Created 7 years ago
  • Reactions: 2
  • Comments: 16 (9 by maintainers)

Most upvoted comments

That seems to have worked. I’m still not sure why it was refusing to load stylesheets from the other location, but they’re in there now; I just needed to change the relative path of a background-image to get everything as it should be.

Thanks for all your help — hopefully all this will prove useful to somebody else who finds it, as well 😃