Search code examples
vue.jswebpackvuejs2vue-cli-3autoprefixer

Vue3 autoprefixer config issue


I have a new project that was created with Vue-cli 3 using vue create my-new-project. I am using CSS grid for some layout things and i need to support IE11 and newer. Vue docs say that autoprefixer is loaded and enabled by default but its not working. I cant get it to work in either npm run build or npm run serve. Works fine in chrome but IE11 its not working. Im sure there is some config that needs to be done but im unsure what that may be.

.browserslistrc:

> 1%
last 4 versions

postcss.config.js:

module.exports = {
  plugins: {
    autoprefixer: {}
  }
};

Solution

  • CSS Grid support is disable by default.
    You can enable it by using either the grid: autoplace option or the /* autoprefixer grid: autoplace */ control comment.

    module.exports = {
      plugins: {
        'autoprefixer': {
          grid: 'autoplace'
        },
      }
    };
    

    Does Autoprefixer polyfill Grid Layout for IE?