PostCSS modules are loading from the wrong directory

1.4k Views Asked by At

I'm trying to get PostCSS CLI to work on Windows, to use with PHPStorm. I've got it working via command line options, but I want to use it with the javascript config file.

Here are the commands I used to install PostCSS through NPM:

# NPM is installed at PostCSS\node\npm. Commands are run in the PostCSS dir.

"node\npm" install --global postcss-cli # PostCSS\node\node_modules\postcss-cli\
"node\npm" install --global lost        # PostCSS\node\node_modules\lost\
# and a few other modules...

So I've got about 6 modules are in the node/node_modules directory now.

I have this batch file (split into multiple lines for your viewing pleasure). This is in the PostCSS folder, just for testing:

"node\postcss" -u postcss-normalize
               -u postcss-cssnext 
               -u postcss-import
               -u lost
               -o output.css
               source.css

This batch file works, and all of the plugins work too.

My problem:

I want to use postcss.config.js, instead of command line parameters, so that I can customize the plugins easily and make it even more portable. I have dozens of separate projects that I will use the same settings for in different directories and computers. So to do that, I've got a new batch file called "run-from-config.bat" with the following content:

"node\postcss" -c "postcss.config.js"
               -o output-configured.css
               source.css

This new batch file is in the same folder as the command line version, along with the new file postcss.config.js:

module.exports = {
  plugins: [
    require('postcss-normalize')({
        "browserslist": "last 2 versions" // I intend to add more options...
    }),
    require('postcss-cssnext')({}),
    require('postcss-import')({}),
    require('lost')({})
  ]
}

This follows the instructions on the PostCSS-CLI page under "Content": https://github.com/postcss/postcss-cli

But it gives me an error, and appears to be loading modules from the wrong location:

    Processing source.css
    { Error: Cannot find module 'postcss-normalize'
        at Function.Module._resolveFilename (module.js:469:15)
        at Function.Module._load (module.js:417:25)
        at Module.require (module.js:497:17)
        at require (internal/module.js:20:19)
        at Object.<anonymous> (G:\Dropbox\Web Development\PostCSS\postcss.config.js:3:5)
        at Module._compile (module.js:570:32)
        at requireFromString (G:\Dropbox\Web Development\PostCSS\node\node_modules\postcss-cli\node_modules\require-from-string\index.js:27:4)
        at G:\Dropbox\Web Development\PostCSS\node\node_modules\postcss-cli\node_modules\cosmiconfig\lib\loadJs.js:11:15 code: 'MODULE_NOT_FOUND' }

So it seems it can't find the module when using this javascript config file. But it can when loading plugins through the command line option -u. I simply don't know how to change the module directory.

I tried using some other options to change the directory, including -b and -d, but nothing seems to work. And I just don't understand PostCSS (or the underlying javascript software) enough to debug the problem on my own.

0

There are 0 best solutions below