Webpack 4中PostStylus配置Autoprefixer无效问题求助

Hey there, let's figure out why your autoprefixer isn't working with Webpack 4 and poststylus. The main issue here is that LoaderOptionsPlugin is deprecated in Webpack 4 — that plugin was built for Webpack 1/2, and Webpack 4 no longer uses it to pass configuration to loaders. Your current setup isn't actually applying the poststylus plugins at all, which is why no prefixes are showing up in your final bundle.

Here's how to fix this step by step:

1. Remove the deprecated LoaderOptionsPlugin
   Delete that entire new webpack.LoaderOptionsPlugin(...) block from your config — it’s not doing anything useful here, and might even cause unexpected behavior in Webpack 4.

2. Configure poststylus directly in stylus-loader
   You need to pass the poststylus plugin directly to stylus-loader through its options. The exact syntax depends on your stylus-loader version:

   • If you’re using stylus-loader v4 or newer:
     Wrap the poststylus config inside stylusOptions:

     module: {
       rules: [
         {
           test: /\.styl$/,
           use: [
             'style-loader', // Injects styles into the DOM
             'css-loader', // Resolves @import and url() in CSS
             {
               loader: 'stylus-loader',
               options: {
                 stylusOptions: {
                   use: [
                     poststylus([
                       'autoprefixer',
                       'rucksack-css'
                     ])
                   ]
                 }
               }
             }
           ]
         }
       ]
     }
     

   • If you’re using stylus-loader v3 or older:
     You can pass the use option directly without stylusOptions:

     module: {
       rules: [
         {
           test: /\.styl$/,
           use: [
             'style-loader',
             'css-loader',
             {
               loader: 'stylus-loader',
               options: {
                 use: [
                   poststylus([
                     'autoprefixer',
                     'rucksack-css'
                   ])
                 ]
               }
             }
           ]
         }
       ]
     }
     

3. Make sure autoprefixer knows which browsers to target
   Autoprefixer needs clear instructions on which browsers to support. Add a browserslist field to your package.json to define this:

   {
     "browserslist": [
       "last 2 versions",
       "> 1%",
       "ie >= 11"
     ]
   }
   

   This tells autoprefixer to add prefixes for the last 2 versions of all major browsers, browsers used by over 1% of the global population, and IE 11+. Adjust these values based on your project’s specific needs.

4. Verify your dependencies are installed
   Double-check that you have all required packages installed:

   npm install autoprefixer rucksack-css poststylus stylus stylus-loader css-loader style-loader --save-dev
   

Once you’ve made these changes, re-run your Webpack build. You should now see vendor prefixes (like -webkit-, -moz-, etc.) added to your CSS properties where needed.

内容的提问来源于stack exchange，提问作者Nikolay Volkov