doesn't work with webpack

[ValentinCreative]

Same problem here. No errors log, simply keep px value in results.

[cuth]

Other PostCSS plugins are working? The px units are lowercase?

[ValentinCreative]

Yes other plugins are working great, and I put px units in lowercase.

[cuth]

Any more information you can give me about what your webpack configuration looks like? I've never used webpack for CSS.

[ValentinCreative]

Here is my webpack.config.js file :

var webpack      = require('webpack');
var autoprefixer = require('autoprefixer-core');
var vars         = require('postcss-simple-vars');
var atImport     = require('postcss-import');
var nested       = require('postcss-nested');
var pxtorem      = require('postcss-pxtorem');

var commonsPlugin = new webpack.optimize.CommonsChunkPlugin('common.js');

module.exports = {
    devtool: 'sourcemap',
    output: {
        filename: 'bundle.js'
    },
    module: {
        loaders: [
            { test: /\.js$/, exclude: [/app\/lib/, /node_modules/], loader: 'babel' },
            { test: /\.html$/, loader: 'raw' },
            { test: /\.css$/, loader: "style-loader!css-loader!postcss-loader" }
        ]
    },
    postcss: function () {
        return [
            atImport,
            nested,
            vars,
            autoprefixer,
            pxtorem
        ];
    },
    plugins: [commonsPlugin],
};

[ghoshnirmalya]

Working with postcss 5.0.19 :)

[joefiorini]

Can confirm working for me with webpack & postcss: 5.0.21 postcss-pxtorem: 3.3.1.

[xueqingxiao]

this plugin can‘t convert px to rem, when I reference sass variable from another file. please take a look.

[mqklin]

you may want to use propWhiteList option:

postcss: [
  require('postcss-pxtorem')({ propWhiteList: [] }),
],

[ghost]

Hi, propList consider supporting file mode ? Hope that some documents are not converted.

[cuth]

What is "file mode"? I googled it with postcss and nothing came up.

Also, propWhiteList is deprecated, use propList.

[ghost]

webpack 2.2.0
postcss-pxtorem: 4.0.0

In 4.0.0, Probably the propWhiteList resulted in not being fully converted to rem.

Can be used normally:

postcss: function () {
    return [
        require('autoprefixer'),
        require('postcss-nested'),
        pxtorem({
            rootValue: 100,
            propWhiteList: [], // don't use propList.
            selectorBlackList: ['pc'],
        })
    ];
},

[akulov]

Works fine for me:

"webpack": "1.14.0",
"postcss-pxtorem": "^4.0.0",

webpack.config.dev.js:

postcss(bundler) {
    return {
      default: [
        // Transfer @import rule by inlining content, e.g. @import 'normalize.css'
        // https://github.com/postcss/postcss-import
        require('postcss-import')({ addDependencyTo: bundler }),
        // W3C variables, e.g. :root { --color: red; } div { background: var(--color); }
        // https://github.com/postcss/postcss-custom-properties
        require('postcss-custom-properties')(),
        // W3C CSS Custom Media Queries, e.g. @custom-media --small-viewport (max-width: 30em);
        // https://github.com/postcss/postcss-custom-media
        require('postcss-custom-media')(),
        // CSS4 Media Queries, e.g. @media screen and (width >= 500px) and (width <= 1200px) { }
        // https://github.com/postcss/postcss-media-minmax
        require('postcss-media-minmax')(),
        // W3C CSS Custom Selectors, e.g. @custom-selector :--heading h1, h2, h3, h4, h5, h6;
        // https://github.com/postcss/postcss-custom-selectors
        require('postcss-custom-selectors')(),
        // W3C calc() function, e.g. div { height: calc(100px - 2em); }
        // https://github.com/postcss/postcss-calc
        require('postcss-calc')(),
        // Allows you to nest one style rule inside another
        // https://github.com/jonathantneal/postcss-nesting
        require('postcss-nesting')(),
        // W3C color() function, e.g. div { background: color(red alpha(90%)); }
        // https://github.com/postcss/postcss-color-function
        require('postcss-color-function')(),
        // Convert CSS shorthand filters to SVG equivalent, e.g. .blur { filter: blur(4px); }
        // https://github.com/iamvdo/pleeease-filters
        require('pleeease-filters')(),
        // Generate pixel fallback for "rem" units, e.g. div { margin: 2.5rem 2px 3em 100%; }
        // https://github.com/robwierzbowski/node-pixrem
        require('pixrem')(),
        // W3C CSS Level4 :matches() pseudo class, e.g. p:matches(:first-child, .special) { }
        // https://github.com/postcss/postcss-selector-matches
        require('postcss-selector-matches')(),
        // Transforms :not() W3C CSS Level 4 pseudo class to :not() CSS Level 3 selectors
        // https://github.com/postcss/postcss-selector-not
        require('postcss-selector-not')(),
        // A plugin for PostCSS that generates rem units from pixel units.
        // https://github.com/cuth/postcss-pxtorem
        require('postcss-pxtorem')(),
        // Add vendor prefixes to CSS rules using values from caniuse.com
        // https://github.com/postcss/autoprefixer
        require('autoprefixer')({ browsers: AUTOPREFIXER_BROWSERS }),
      ],
      sass: [
        require('autoprefixer')({ browsers: AUTOPREFIXER_BROWSERS }),
      ],
    };
  },

[wesruv]

Not working for me using Grunt either :frowning_face: I've tried multiple versions of postcss-px-to-rem, postcss, grunt, and probably other packages, not working for some reason.

Here's my current versions:

    "postcss": "^5.2.18",
    "postcss-pxtorem": "^3.3.1"
    "grunt-postcss": "^0.9.0",
    "grunt": "^1.0.2",
    "grunt-autoprefixer": "^3.0.4",
    "grunt-cli": "^1.2.0",

    'postcss': {
      'options': {
        'map': {
            'inline': false, // save all sourcemaps as separate files...
            'annotation': 'dist/css/maps/' // ...to the specified directory
        },

        'processors': [
          require('autoprefixer')({'browsers': 'last 2 versions'}), // add vendor prefixes
          require('postcss-pxtorem')({'replace': true}), // Convert all pixels into rem
          require('cssnano')() // minify the result
        ]
      },
      'dist': {
        'src': 'css/*.css'
      }
    },

Confirmed that autoprefixer and cssnano are working, and was able to put console.log in different places in this postcss.plugin call and saw it in the cli output.

module.exports = postcss.plugin('postcss-pxtorem', function (options) {

So it's running the code, but it the results aren't getting to the final CSS.

[expanding]

How to use in vue project

[cuth]

Should be the same as any other PostCSS plugin.

[budarin]

and that nothing has changed over the years??