webpack postcss

用户4793865

发布于 2023-01-12 13:23:00

35500

代码可运行

文章被收录于专栏：前端小菜鸡yym前端小菜鸡yym

运行总次数：0

代码可运行

postcss

postcss是什么？有什么用？

JavaScript转换样式的工具。让css样式适配不同的浏览器(不用自己去手动的添加了)。

安装postcss

npm i postcss-cli -D

autoprefixer

网址

如下，它将左侧的css进行了多个浏览器版本的兼容。

postcss使用命令行

新建一个test.css文件，然后在login.js中引用。

把官网的如下代码复制到test.css

.example {
    display: grid;
    transition: all .5s;
    user-select: none;
    background: linear-gradient(to bottom, white, black);
}

新进行一下npm run build编译，然后审查元素发现，我们的test.css的样式加入进来了。但是并没有针对浏览器来进行样式的兼容。比如transition就没有添加前缀为-webkit-transition

然后我们尝试着用postcss进行处理

-o也就是output 然后我们要输出成的文件操作的文件

npx postcss -o ret.css ./src/css/test.css

确实是生成了一个新的文件，但是并没有添加前缀。其实postcss是一个独立的工具，本身什么也不能做。他还需要其他插件。

autoprefixer的使用

首先，不要忘了我们的.browserslistrc。这里是对需要兼容的浏览器版本的一个约束。autoprefixer的编译那，也会根据.browserslistrc来进行编译的。

安装：

npm i autoprefixer -D

然后使用autoprefixer再次执行postcss，此时可以发现都加上了适配不同浏览器的前缀了。

npx postcss --use autoprefixer -o ret.css ./src/css/test.css

postcss-loader

我们的项目中，如果需要进行css兼容浏览器的处理，并不可能都去使用命令行去处理。因此就需要loader的处理。

安装postcss-loader，其内部又是使用了postcss的。

npm i postcss-loader -D

webpack.config.js

因为是对样式文件的处理，因此需要加到css文件loader中。并且，对css的兼容是在处理css文件前就执行的。因此顺序是'postcss-loader'在最右边。

 module: {
    rules: [
      {
        // 是一个正则表达式
        test: /\.css$/,
        // 可能有多个loader  执行顺序从右往左  
        use: ['style-loader','css-loader','postcss-loader'],
      },
      {
          test: /\.less$/,
          use:['style-loader','css-loader','less-loader']
      }
    ],
  },

比如要添加前缀，那么postcss本身是不能处理的，需要对其进行一些配置。上面的写法就需要改变。

 module: {
    rules: [
      {
        // 是一个正则表达式
        test: /\.css$/,
        // 可能有多个loader  执行顺序从右往左  
        use: ['style-loader','css-loader',
        {
          loader:'postcss-loader',
          // postcss-loader添加配置
          options:{
          // 配置中使用postcss
            postcssOptions:{
            // postcss配置中使用插件
              plugins:[
              // 使用了autoprefixer插件，进行css前缀的处理
                require('autoprefixer')
              ]
            }
          }
        }],
      },
      {
          test: /\.less$/,
          use:['style-loader','css-loader','less-loader']
      }
    ],
  },

然后此时再执行 npm run build，可以看到css针对不同浏览器的前缀都添加了。