Autoprefixer: How to use autoprefixer in postcss.config.js?

Created on 12 Jun 2017  路  1Comment  路  Source: postcss/autoprefixer

Hi guys, i need some help here. I'm getting this error: 'Module build failed: TypeError: selection.trim is not a function ' at multiple places after adding autoprefixer.

Extract of webpack configs:

const autoprefixer = require('autoprefixer');

const productionScssLoader = [
    {
      loader: 'style-loader'
    },
    {
      loader: 'css-loader', 
      options: { 
        modules: true, 
        minimize: true,
        autoprefixer: autoprefixer
      } 
    },
    {
      loader: 'postcss-loader',
      query: { 
        sourceMap: 'inline', 
        parser: 'postcss-scss'
      }
    }
  ];

postcss.config.js file:

const glob = require('glob');
const path = require('path');
const precss = require('precss');
const autoprefixer = require('autoprefixer');

module.exports = {
  plugins: {
    'postcss-import': { 
      addModulesDirectories: ['app'],
      resolve: function(id, base) {
        return glob.sync(path.join(base, id));
      } 
    },
    precss: precss,
    autoprefixer: autoprefixer({ browsers: ['last 2 versions', 'iOS >= 8'] })
  },
};

Most helpful comment

  1. Why you need autoprefixer: autoprefixer in css-loader?
  2. PostCSS config is wrong. In key-value format, key is plugin name and value is plugin option (PostCSS will load plugin automatically).
module.exports = {
  plugins: {
    'postcss-import': { 
      addModulesDirectories: ['app'],
      resolve: function(id, base) {
        return glob.sync(path.join(base, id));
      } 
    },
    precss: { },
    autoprefixer: { browsers: ['last 2 versions', 'iOS >= 8'] }
  },
}

>All comments

  1. Why you need autoprefixer: autoprefixer in css-loader?
  2. PostCSS config is wrong. In key-value format, key is plugin name and value is plugin option (PostCSS will load plugin automatically).
module.exports = {
  plugins: {
    'postcss-import': { 
      addModulesDirectories: ['app'],
      resolve: function(id, base) {
        return glob.sync(path.join(base, id));
      } 
    },
    precss: { },
    autoprefixer: { browsers: ['last 2 versions', 'iOS >= 8'] }
  },
}
Was this page helpful?
0 / 5 - 0 ratings

Related issues

plesiecki picture plesiecki  路  4Comments

flying-sheep picture flying-sheep  路  4Comments

KeviinCosmos picture KeviinCosmos  路  3Comments

Aljullu picture Aljullu  路  6Comments

simevidas picture simevidas  路  4Comments