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)
 
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 😃