Autoprefixer does not prefix imported css files

[alex-schmidigital]

I'm having a problem with imported css files, which will not be prefixed.

I know I have to solve this issue somehow by the loader, but I can't really figure out how.

So here is an example

@import '~vue-material/dist/vue-material.css';

.md-button
  &.md-icon-button
    .md-icon
      transform: translate(-50%, -50%)

the self written rule in the sass file will be prefixed as it should, but the imported vue-material.css will not be prefixed.

Can anyone explain to me, how i have to change the loaders, so they will prefix everything?

[alex-schmidigital]

Okay so I actually just got it to work a few minutes after posting this issue.

We included the postcss-import module into the loader and it works fine

in webpack.base.conf.js

vue: {
    loaders: utils.cssLoaders({ sourceMap: useCssSourceMap }),
    postcss: [
      require('postcss-import')(),
      require('autoprefixer')({
        browsers: ['> 1%']
      })
    ]
  }

the only question that remains is if there is any other way to do this, so that i don't need another module. Help would be great!

[myronliu347]

If you require css in js file, it`s no use

import 'main.css'

[kazupon]

Close (in-activity)

[RunningV]

@alex-schmidigital doesn't work for me, i use vue-cli@2.8.1 build the full webpack vue proj, add webpack config in vue-loader.conf.js like this:

  module.exports = {
  loaders: utils.cssLoaders({
    sourceMap: isProduction
      ? config.build.productionSourceMap
      : config.dev.cssSourceMap,
    extract: isProduction
  }),
  postcss: [
    require('postcss-import')(),
    require('autoprefixer')({
      browsers: ['last 5 versions', 'Android >= 2.0']
    })
  ]
}

i learn to use webpack@2.xx, but not practise, anyone can help? tks

[zhengjitf]

@RunningV Autoprefixer works ,but 'hot-reload' doesn't work

[ghost]

Back link to stackoverflow. I can't get this working with my build.
https://stackoverflow.com/questions/45208186/vue-webpack-2-autoprefixer-for-ie9