Javascript Webpack 4、PostSS加载程序和autoprefixer插件

我在尝试让自动刷新器工作时感到非常沮丧

这是我的webpack.config.js

const HtmlWebPackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

const config = {
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader"
                }
            },
            {
                test: /\.(scss)$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    { loader: "css-loader", options: {} },
                    { loader: "postcss-loader", options: {} },
                    // {
                    //  loader: "postcss-loader",
                    //  options: {
                    //      ident: "postcss",
                    //      plugins: (loader) => [
                    //          require('autoprefixer')({ browsers: ['defaults']})
                    //      ]
                    //  }
                    // },
                    { loader: "sass-loader", options: {} }
                ]
            },
            {
                test: /\.mp3$/,
                use: {
                    loader: "file-loader"
                }
            }
        ]
    },
    plugins: [
        new HtmlWebPackPlugin({
            template: "./src/index.html",
            filename: "./index.html"
        }),
        new MiniCssExtractPlugin({
            filename: "main.css"
        })
    ]
};

module.exports = config;

module.exports = {
  plugins: [
    require('autoprefixer')()
  ]
}

这是我的postsss.config.js

const HtmlWebPackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

const config = {
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader"
                }
            },
            {
                test: /\.(scss)$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    { loader: "css-loader", options: {} },
                    { loader: "postcss-loader", options: {} },
                    // {
                    //  loader: "postcss-loader",
                    //  options: {
                    //      ident: "postcss",
                    //      plugins: (loader) => [
                    //          require('autoprefixer')({ browsers: ['defaults']})
                    //      ]
                    //  }
                    // },
                    { loader: "sass-loader", options: {} }
                ]
            },
            {
                test: /\.mp3$/,
                use: {
                    loader: "file-loader"
                }
            }
        ]
    },
    plugins: [
        new HtmlWebPackPlugin({
            template: "./src/index.html",
            filename: "./index.html"
        }),
        new MiniCssExtractPlugin({
            filename: "main.css"
        })
    ]
};

module.exports = config;

module.exports = {
  plugins: [
    require('autoprefixer')()
  ]
}

目前，mypackage.json保存着我的浏览器列表选项

正如您所见，我已经尝试使用webpack文件保存postcss loader的配置设置，并且还尝试创建一个单独的配置文件

我尝试过移动浏览器列表，但我认为这不是问题所在，因为我运行了

npx browserslist

，可以看到所选浏览器的列表

我的网页配置中的

postsss加载程序

声明位于

css加载程序

之后和

sass加载程序

---

当我运行webpack时，我的控制台中也没有收到任何错误，所以不确定发生了什么，但我真的需要一些帮助

不工作，但

{browsers:['defaults']}

尝试：

或

试着像这样编辑

webpack.config.js：

{
            test: /\.scss$/,
            use: [
                "style-loader", "css-loader", 'postcss-loader', 'resolve-url-loader', 'sass-loader?sourceMap'
            ]
        },

require('autoprefixer')({browsers: ['last 10 versions']}),

postss.config.js：

{
            test: /\.scss$/,
            use: [
                "style-loader", "css-loader", 'postcss-loader', 'resolve-url-loader', 'sass-loader?sourceMap'
            ]
        },

require('autoprefixer')({browsers: ['last 10 versions']}),

---

如上所述，您需要指定浏览器列表。 但是，不必将其添加到

webpack.config

和

postsss config

中，您只需将以下代码添加到依赖项之后的

package.json

。为我工作

"browserslist": [
  "> 1%",
  "last 2 versions"
],

---

这里的重点是，您实际上缺少环境中的软件包，因此要解决此问题，您有两种解决方案：

解决方案1

npm install --save-dev postcss-loader autoprefixer

现在，您可以在postsss.config.js文件中添加如下内容：

module.exports = {
  plugins: [
    require('autoprefixer')({
      'browsers': ['> 1%', 'last 2 versions']
    })
  ]
};

...
rules: [
  {
    test: /\.(sa|sc|c)ss$/,
    use: [
      MiniCssExtractPlugin.loader,
      { loader: "css-loader", options: {} },
      {
        loader: "postcss-loader",
        options: {
          ident: 'postcss',
          plugins: [
            require('autoprefixer')({
              'browsers': ['> 1%', 'last 2 versions']
            }),
          ]
        }
      },
      { loader: "sass-loader", options: {} }
    ]
  }
]
...

解决方案2（推荐）

这一个来自，并且由于您正在使用这个包，这可能是推荐的方法

postss预设环境包含autoprefixer，因此需要单独添加它 如果已使用预设，则不需要

正如您所见，为了获得Autoprefixer，您只需安装

现在去掉postsss.config.js文件，将该配置移动到webpack.config.js中，使其看起来像这样：

module.exports = {
  plugins: [
    require('autoprefixer')({
      'browsers': ['> 1%', 'last 2 versions']
    })
  ]
};

...
rules: [
  {
    test: /\.(sa|sc|c)ss$/,
    use: [
      MiniCssExtractPlugin.loader,
      { loader: "css-loader", options: {} },
      {
        loader: "postcss-loader",
        options: {
          ident: 'postcss',
          plugins: [
            require('autoprefixer')({
              'browsers': ['> 1%', 'last 2 versions']
            }),
          ]
        }
      },
      { loader: "sass-loader", options: {} }
    ]
  }
]
...

---

我希望这有帮助，我也花了很长时间才弄明白；）

我尝试为浏览器列表使用不同的值，但仍然不起作用。我不认为浏览器列表有问题，因为我运行了

npx browserslist

，可以看到哪些浏览器应该受到影响。我试图编辑我以前的评论，但你的答案确实有效！我知道我尝试了不同的浏览器选项值，但由于某种原因，它今天早上起作用了。。。我想我可能有拼写错误。唯一似乎不起作用的值是

defaults

选项。谢谢你的发帖！在尝试了所有其他方法后，这也对我起到了作用+1当将浏览器版本从

默认值更改为任何其他选项时，事情似乎正在运行看起来您仍然声明了预设可用的插件。