Ngx-admin: No PostCSS Config found with build:prod

[Hehohehoheho]

• I'm submitting a ...
  [x ] bug report
  [ ] feature request
  [ ] question about the decisions made in the repository

When I try to deploy the dashboard using Jenkins on a Linux environment, I am getting the following error

 ERROR in ./~/css-loader!./~/postcss-loader!./~/resolve-url-loader!./~/sass-loader?sourceMap!./~/bootstrap-loader/lib/bootstrap.styles.loader.js!./~/bootstrap-loader/no-op.js
Module build failed: Error: No PostCSS Config found in: /app/jenkins/workspace/dashboard/node_modules/bootstrap-loader
at Error (native)
at /app/jenkins/workspace/Toolbox-web/node_modules/postcss-load-config/index.js:51:26
@ ./~/style-loader!./~/css-loader!./~/postcss-loader!./~/resolve-url-loader!./~/sass-loader?  sourceMap!./~/bootstrap-loader/lib/bootstrap.styles.loader.js!./~/bootstrap-loader/no-op.js 4:14-193
@ ./~/bootstrap-loader/lib/bootstrap.loader.js!./~/bootstrap-loader/no-op.js
 @ ./~/bootstrap-loader/loader.js
@ ./src/vendor.browser.ts

Any idea on what the problem might be?

[Lowfly]

I have the same issue since 4 hours ! No idea where does it from

[moctarsamb]

same issue too

[garit]

I had the same issue, I manage to fix it by changing in the dependencies of my package.json :
"postcss-loader": "^1.0.0" by "postcss-loader": "1.0.0"
and adding "postcss-load-config": "1.0.0"

[AlbertXingZhang]

Or you can create a file named postcss.config.js in root directory.
Just leave it empty or write the following line.

module.exports = {};

It is a temp fix if you want to use postcss-loader with version > 1.2.1.

[arimus]

FWIW, I had to create the postcss.config.js (with module.exports={}) to get things working again. Even with the latest commit which locks the version to 1.0.0 and adds the loader entry, the problem is not resolved without the minimal config file.

[nnixaa]

@ESadouski please take a look at https://github.com/akveo/ng2-admin/issues/604#issuecomment-271974780 comment which looks like a proper fix.

[ESadouski]

https://github.com/akveo/ng2-admin/pull/614

[moimikey]

better solution... since you're obviously using webpack, add a postcss: {} key val to your webpack config. or if using webpack 2, loader options plugin, pass that key val pair.

[gazorg]

@momikey seems good, but I cannot get it to work with webpack 2. The workaround with the postcss.config.js file does work. A bit less elegant, though.

[moimikey]

@gazorg can you post your config? :)

[gazorg]

Of course I can. As it is just doodling, I can post the entire build. Though, I should say that I just have the same problem and was very happy to find a workaround. My setup is vue js 2/webpack 2/bootstrap 4 so I think quite different. That was the reason I didn't post the config in the first place.

https://github.com/gazorg/vue2bootstrap4webpack2test

[aseem2625]

@moimikey
I've following thing.. (using webpack 2)

        new webpack.LoaderOptionsPlugin({
            options: {
                babel,
                postcss: [
                    require('autoprefixer')({ browsers:['last 3 version'] })
                ]
            }
        })

You suggested to use this and I already have browsers:[...] so it doesn't work.

Started happening after I updated it from "postcss-loader": "^1.3.3", to "postcss-loader": "^2.0.6",

However, this works fine.

[amir-arad]

same problem here just like @aseem2625 , same results from trying both fixes.
webpack 3.0.0, postcss-loader 2.0.6

 new webpack.LoaderOptionsPlugin({
                options: {
                    context: sourcePath,
                    postcss: removeEmpty([
                        require('postcss-import')({addDependencyTo: webpack}),
                        require('postcss-url')(),
                        require('autoprefixer'),
                        require('postcss-reporter')(),
                        ifNotProd(require('postcss-browser-reporter')()),
                    ])
                }
            }),

[kevinweber]

Adding postcss.config.js is a good solution. However, if you want to avoid adding an extra file, read how I solved it:

I had the Error: No PostCSS Config found issue after upgrading to postcss-loader version 2.0.6 and because I was still using Webpack's LoaderOptionsPlugin. But with the latest version of PostCSS, you should no longer use that plugin. You can place the PostCSS configuration right within your Webpack rules (and no longer use the LoaderOptionsPlugin). That solved my issue. See how I added options to the postcss-loader:

...
      test: /\.s?css$/,
      exclude: /node_modules/,
      use: ExtractTextPlugin.extract({
        use: [{
          loader: 'css-loader'
        }, {
          loader: 'postcss-loader',
          options: {
            plugins: (loader) => [
              require('postcss-smart-import'),
              require('autoprefixer'),
            ]
          }
        }, {
          loader: 'sass-loader'
        }]
      })
...

[victorgarciaesgi]

@AlbertXingZhang thanks you man it has been 3 hours that i had this problem

[egucciar]

@kevinweber tried your solution with no luck. Spent 1 hour tryin. Guess ill have to add this useless config file

[jurgel]

another alternatives from adding postcss.config.js is to add a file name .postcssrc with content:

{}

or even better, no need to create any file, just add this single line into package.json

{
  ...
  "postcss": {},
  ...
}

[catchmareck]

Had the same issue and I've managed to solve it thanks to @kevinweber. The only thing I changed was postcss-smart-import to postcss-import, like this:

...
    use: ExtractTextPlugin.extract({
        use: [
        ...
        {
          loader: 'postcss-loader',
          options: {
            plugins: (loader) => [
              require('postcss-import'),
              require('autoprefixer')
            ]
          }
        }
        ...
        ]
      })
...

[DesignByOnyx]

I ran into this issue using a monorepo with dependency hoisting enabled (via pnpm and --shamefully-hoist=true) and a package built with Vue. The loader was looking for my postcss.config.js in the project root instead of in the package where it was being used. The empty file fix mentioned above worked, but it wasn't using any of my plugins. To fix this, I turned the the empty postcss config file into a proxy to the currently running package. Here is my file structure:

/my-monorepo
    postcss.config.js     <-- see file contents below
    node_modules/
        webpack/
        postcss-loader/
    packages/
        my-vue-app/
            postcss.config.js
            vue.config.js

Here is the proxy file:

const relativeCwd = '.' + process.cwd().replace(__dirname, ''); //-> ./packages/my-vue-app
module.exports = require(relativeCwd + '/postcss.config.js');

Hope that helps someone.