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 😃