07-webpack处理CSS的兼容性

最新推荐文章于 2024-04-25 23:45:26 发布

CaRuJan

最新推荐文章于 2024-04-25 23:45:26 发布

阅读量267

点赞数

分类专栏：学习文章标签： webpack

本文链接：https://blog.csdn.net/qq_33290233/article/details/115374630

版权

学习专栏收录该内容

37 篇文章 0 订阅

订阅专栏

下载
css的兼容性需要用postcss处理，下载两个包postcss-loader和postcss-preset-env
npm i postcss-loader postcss-preset-env -D
postcss会找到package.json中的browserslist里面的配置，通过配置加载css的兼容性
修改loader的配置，新版需要写postcss.config.js, less和sass兼容性同理
package.json配置 (package.json里最好不要写注释，会报错)

  "browserslist": [
    "> 0.2%",               //兼容80%的浏览器
    "last 2 versions",      //兼容最新2个版本内的浏览器
    "not dead"              //不要死掉的浏览
  ]

根目录下新建postcss.config.js

module.exports={
    plugins: [
        require("postcss-preset-env")
    ]
}

webpack.config.js

module: {                  //css打包规则
        rules: [{
            test: /\.css$/,        //把项目中所有以.css结尾的文件打包,插入到html里
            use: [MiniCssExtractPlugin.loader,"css-loader","postcss-loader"]  //css兼容loader，单独的css文件
        }]
    },

body {
    margin: 0;
    padding: 0;
}

h1 {
    color: blue;
}
.box {
    width: 100px;
    height: 150px;
    background-color: bisque;
    color: blueviolet;
    display: flex;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>商城首页~~~~~~</h1>
<div class="box">
    this is a box1
</div>
<div class="box2">
    this is a box2
</div>
<div class="box3">
    this is a box3
</div>
</body>
</html>

index.js

require("../css/style.css")
console.log("首页专用js文件");

执行webpack

CaRuJan

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
07-webpack处理CSS的兼容性

下载css的兼容性需要用postcss处理，下载两个包postcss-loader和postcss-preset-envnpm i postcss-loader postcss-preset-env -Dpostcss会找到package.json中的browserslist里面的配置，通过配置加载css的兼容性修改loader的配置，新版需要写postcss.config.js, less和sass兼容性同理package.json配置 (package.json里最好不要写注释，..
复制链接

扫一扫