7.0 webpack css兼容性处理

最新推荐文章于 2024-08-13 08:10:35 发布

键盘起火

最新推荐文章于 2024-08-13 08:10:35 发布

阅读量233

点赞数 2

分类专栏： Webpack4 文章标签： webpack css 前端

本文链接：https://blog.csdn.net/weixin_44472131/article/details/137159222

版权

Webpack4 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

#虽然作为一个前端已经耕耘此行业有三五个年头，但都是在业务中未曾精进，怀着初心，重识Webpack，砥砺前行💪#

设置浏览器兼容性在pakage.json文件中设置

"browerslist":{
    "development": [
      "last 1 chrome version",
      "last 2 firefox version",
      "last 3 safari version"
    ],
    "production": [
      "> 0.2%",
      "not dead",
      "not op_mini all"
    ]
  }

设置post-css 在webpack.config.js中

{
                test: /\.css$/,
                use:[
                    // 'style-loader',
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    /* css 兼容性处理： postcss --> postcss-laoder postcss-preset-env */
                    'postcss-loader'
                ]
            },
            {
                test: /\.less$/,
                use: [
                    /* 创建style标签，将样式引入 */
                    // 'style-loader',
                    /* 这个loader 取代style-loader，作用提取js中的css成单独的文件 */
                    MiniCssExtractPlugin.loader,
                    /* 将css整合到js文件中 */ 
                    'css-loader', 
                    'less-loader',
                     'postcss-loader'

Posts-loader 的配置文件放在了根目录下面的postcss.config.js文件中

/* 文件名字： postcss.config.js */
module.exports = {
    plugins:[
        "postcss-preset-env",
    ]
}

ps:Postcss 本身是一个功能比较单一的工具。它提供了一种方式用 JavaScript 代码来处理 css。它负责把 CSS 代码解析成抽象语法树结构（Abstract Syntax Tree，AST），再交由插件来进行处理。插件基于CSS 代码的 AST 所能进行的操作是多种多样的，比如可以支持变量和混入（mixin），增加浏览器相关的声明前缀，或是把使用将来的 CSS 规范的样式规则转译（transpile）成当前的 CSS 规范支持的格式。从这个角度来说，PostCSS 的强大之处在于其不断发展的插件体系。