webpack配置postcss-loader和autoprefixer不生效

最新推荐文章于 2024-11-10 10:05:25 发布

LPLIFE

最新推荐文章于 2024-11-10 10:05:25 发布

阅读量5.3k

点赞数 4

分类专栏： webpack

本文链接：https://blog.csdn.net/LPLIFE/article/details/106607905

版权

webpack 专栏收录该内容

10 篇文章

订阅专栏

postcss.config.js

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

webpack.config.js

 module: {
    rules: [
      //css-loader解析 @import 这种语法
      // style-loader 把css插入到head标签中
      // loader的顺序，默认是从右向左执行 从下到上执行
      // 格式：[] / [{loader:''}]
      {
        test: /\.css$/,
        use: [
          //   {
          //     loader: 'style-loader',
          //     options: {
          //       insert: 'head',
          //     },
          //   },
          MiniCssExtractPlugin.loader,
          { loader: 'css-loader' },
          { loader: 'postcss-loader' },
        ],
      },
      {
        test: /\.less$/,
        use: [
          //   {
          //     loader: 'style-loader',
          //     options: {
          //       insert: 'head',
          //     },
          //   },
          MiniCssExtractPlugin.loader,
          { loader: 'css-loader' },
          { loader: 'postcss-loader' },
          { loader: 'less-loader' },
        ],
      },

配置完了，还不会立即生效，还需要给它配置转化规则

官网已经跟我们说明了这一点 autoprefixer
在这里插入图片描述
翻译：autoprefixer需要搭配Browserslist,提供了两种方式去配置Browserslist，

（官网推荐使用这种方式）在根目录下创建一个.browserslistrc文件，再写进去相关的配置，
或者在package.json中进行配置
其他的配置如babel-preset-env和Stylelint可以共享这份规则

这些配置在官网都可以找到 browserslist 在这里插入图片描述
.browserslistrc

    last 2 version
    > 1%
    iOS >= 7
    Android > 4.1
    Firefox > 20

package.json中

"browserslist": [
    "last 2 version",
    "> 1%",
    "iOS >= 7",
    "Android > 4.1",
    "Firefox > 20"
  ]

再进行打包：
在这里插入图片描述