Without `from` option PostCSS could generate wrong source map or do not find Browserslist config

Question

Witout from option PostCSS could generate wrong source map or do not find Browserslist config. Set it to CSS file path or to undefined to prevent this warning

ionic3 project, when I running ionic corodva bulid ios --prod showing this warning for me.

ionic info

cli packages: (/usr/local/lib/node_modules)

    @ionic/cli-utils  : 1.19.0
    ionic (Ionic CLI) : 3.19.0

global packages:

    cordova (Cordova CLI) : 7.1.0 

local packages:

    @ionic/app-scripts : 3.1.7
    Cordova Platforms  : android 6.3.0 ios 4.4.0
    Ionic Framework    : ionic-angular 3.9.2

System:

    ios-deploy : 1.9.2 
    Node       : v6.11.3
    npm        : 3.10.10 
    OS         : macOS Sierra
    Xcode      : Xcode 9.2 Build version 9C40b 

Environment Variables:

    ANDROID_HOME : not set

Misc:

    backend : pro

UPDATE:

I tried to update my npm to 5.5.1 and node to 8.6.0, but still showing.

Answer 1

Finally, this warning solved. Thanks to Suraj Rao

First find sass.js file under /node_modules/@ionic/app-scripts/dist/sass.js. inside search var postcssOptions and add from: undefined,

Finally should be like this:

var postcssOptions = {
            from: undefined,
            to: path_1.basename(sassConfig.outFile),
            map: autoPrefixerMapOptions
        };

Reference? workaround.

Answer 2

For whoever directly used PostCSS and met this issue then came here, Change your

postcss( any_plugins ).process( css )

to

postcss( any_plugins ).process( css, { from: undefined } )

can fix the issue.

Answer 3

For me, adding map: { inline: false } solved my problem.