PostCSS appropriate loader

[innocenzi]

• I have searched through existing issues
• I have read through docs
• I have read FAQ

Info

• Platform: Windows
• Vetur version:
• VS Code version:

Problem

Using this code:

I get this error:

I have seen numerous GitHub issues concerning this problem (#792, #506, vuejs/vue-cli#1259, stylelint/stylelint#3348) but although most of them are closed/solved, the fix is not to be seen anywhere, or at least I could not find it. I believe something is missing in the documentations.

Reproduction

To reproduce the issue, have Webpack Encore installed with the following relevant config:

Encore
    // ...
    .enablePostCssLoader()
    .enableVueLoader();

Which produces this Webpack config (it's exported with console.log, hence the bad formatting):

{  
   mode:'development',
   output:{  
      path:'D:\\Projets\\Web\\Root\\symfony-boilerplate\\public\\build',
      filename:'[name].js',
      publicPath:'/build/',
      pathinfo:true
   },
   module:{  
      rules:[  
         {  
            test:/\.jsx?$/,
            exclude:/(node_modules|bower_components)/,
            use:[  
               Array
            ]
         },
         {  
            resolve:[  
               Object
            ],
            test:/\.css$/,
            oneOf:[  
               Array
            ]
         },
         {  
            test:/\.(png|jpg|jpeg|gif|ico|svg|webp)$/,
            loader:'file-loader',
            options:[  
               Object
            ]
         },
         {  
            test:/\.(woff|woff2|ttf|eot|otf)$/,
            loader:'file-loader',
            options:[  
               Object
            ]
         },
         {  
            test:/\.vue$/,
            use:[  
               {  
                  loader:'vue-loader',
                  options:{  

                  }
               }
            ]
         }
      ]
   },
   plugins:[  
      MiniCssExtractPlugin      {  
         options:[  
            Object
         ]
      },
      DeleteUnusedEntriesJSPlugin      {  
         entriesToDelete:[  
            Array
         ]
      },
      ManifestPlugin      {  
         opts:[  
            Object
         ]
      },
      CleanWebpackPlugin      {  
         paths:[  
            Array
         ],
         options:[  
            Object
         ]
      },
      DefinePlugin      {  
         definitions:[  
            Object
         ]
      },
      {  
         options:[  
            Object
         ],
         lastBuildSucceeded:false,
         isFirstBuild:true
      },
      VueLoaderPlugin      {  

      },
      FriendlyErrorsWebpackPlugin      {  
         compilationSuccessInfo:[  
            Object
         ],
         onErrors:undefined,
         shouldClearConsole:false,
         formatters:[  
            Array
         ],
         transformers:[  
            Array
         ]
      },
      AssetOutputDisplayPlugin      {  
         outputPath:'public\\build',
         friendlyErrorsPlugin:[  
            Object
         ]
      },
      AssetsWebpackPlugin      {  
         options:[  
            Object
         ],
         writer:[  
            Function:queuedWriter
         ]
      }
   ],
   optimization:{  
      namedModules:true,
      chunkIds:'named',
      runtimeChunk:'single',
      splitChunks:{  
         chunks:'all'
      }
   },
   resolve:{  
      extensions:[  
         '.wasm',
         '.mjs',
         '.js',
         '.json',
         '.jsx',
         '.vue',
         '.ts',
         '.tsx'
      ],
      alias:{  
         'vue$':'vue/dist/vue.esm.js'
      }
   },
   externals:[  
   ]
}

If someone knows how to fix that and/or can point me to a piece of documentation I missed, or otherwise correct the documentation, it would be appreciated. :)

[octref]

If I recall correctly, this was fixed in vue-cli. Can't vuepress fix it by using latest vue-loader which should handle lang="postcss"?

[innocenzi]

I'm not using vue-cli nor vuepress. Here are my dependencies if it's of any help:

"devDependencies": {
    "@symfony/webpack-encore": "^0.27.0",
    "autoprefixer": "^9.5.1",
    "core-js": "^3.0.0",
    "postcss-custom-properties": "^8.0.10",
    "postcss-font-magician": "^2.2.1",
    "postcss-import": "^12.0.1",
    "postcss-loader": "^3.0.0",
    "postcss-nested": "^4.1.2",
    "tailwindcss": "^1.0.3",
    "vue-loader": "15.0.11",
    "vue-template-compiler": "^2.6.10",
    "webpack-notifier": "^1.6.0"
}```

[octref]

You'll likely configure https://vue-loader.vuejs.org/guide/pre-processors.html#postcss with a test like test: /\.postcss$/

[innocenzi]

Well that was a pretty simple fix. Thank you very much!

With Webpack Encore, just add the following:

.addLoader({
    test: /\.postcss$/,
    use: [
        'vue-style-loader',
        {
            loader: 'css-loader',
            options: { importLoaders: 1 }
        },
        'postcss-loader'
        ]
})

I do think though that it should be added into the .enablePostCssLoader() method of Encore, but that's an issue with them. Thank you again @octref