关于postcss:postcss及基本使用

0次阅读

共计 2556 个字符，预计需要花费 7 分钟才能阅读完成。

PostCss 是一个用 JavaScript 工具和插件转换 CSS 代码的工具

利用从 Can I Use 网站获取的数据为 CSS 规定增加特定厂商的前缀。Autoprefixer 主动获取浏览器的风行度和可能反对的属性，并依据这些数据帮你主动为 CSS 规定增加前缀。
PostCSS Preset Env 帮你将最新的 CSS 语法转换成大多数浏览器都能了解的语法，并依据你的指标浏览器或运行时环境来确定你须要的 polyfills，此性能基于 cssdb 实现。
CSS 模块能让你你永远不必放心命名太大众化而造成抵触，只有用最有意义的名字就行了。
通过应用 stylelint 强化一致性束缚并防止样式表中的谬误。stylelint 是一个现代化 CSS 代码查看工具。它反对最新的 CSS 语法，也包含相似 CSS 的语法，例如 SCSS。

我的项目中引入 postcss 比方常见的兼容性问题，有些 css 款式在某些浏览器无奈展现，因为不兼容。
此时须要引入 postcss 工具，利用 Autoprefixer 获取浏览器风行度和可能反对的属性，依据 postcss-preset-env 把 CSS 语法转换成大多数浏览器都能了解的语法。这是解决兼容性 css 代码的流程。
这里有个问题，如何晓得是什么浏览器，不同浏览器反对的 css 语法不一样。这里须要引入一个新的工具 browserlist，用于在不同前端工具之间共用指标浏览器和 node 版本的配置工具。应用 Can I Use 网站的数据来查问浏览器版本范畴。
简略来说，就是用来管制浏览器版本的一个插件。
Broswerlist 配置形式能够再 package.json 中配置

  "broswerslist":[
    ">0.01%",
    "last 2 version",
    "nodt dead"
  ]

或者在根目录下新建 .browserlistrc 文件写入

> 0.01% 
last 2 version
not dead

一般的 css,less 文件在 webpack 中的配置如下

  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          "style-loader",
          "css-loader",
        ],
      },
      {
        test: /\.less$/,
        use: [
          "style-loader",
          "css-loader",
          "less-loader",
        ],
      },
    ],
  },

退出 postcss 后

  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          "style-loader",
           "css-loader",
           {
             loader: "postcss-loader",
             options: {
               postcssOptions: {
                  plugins: [require("autoprefixer"),
                    require("postcss-preset-env"),
                  ],
               },
             },
           },
        ],
      },
      {
        test: /\.less$/,
        use: [
          "style-loader",
          "css-loader",
           {
             loader: "postcss-loader",
             options: {
               postcssOptions: {plugins: ["postcss-preset-env"],
               },
             },
           },
          "less-loader",
        ],
      },
    ],
  },

这样的配置有公共代码，不利于浏览，能够提取出 postcss 的公共配置，根目录下新建 postcss.config.js 文件，这里的文件名不能更改，提取公共配置

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

webpack 中的配置就能够简写为

  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          "style-loader",
          "css-loader",
          'postcss-loader',
        ],
      },
      {
        test: /\.less$/,
        use: [
          "style-loader",
          "css-loader",
          'postcss-loader',
          "less-loader",
        ],
      },
    ],
  },

以后这种配置在理论使用中可能存在问题
例如

.title {
  transition: all 0.5s;
  user-select: none;
}

再另一个文件中 index.css 通过 @import 引入

@import './test.css';
.title{color: #12345678;}

此时的 @import 引入了 test.css，能够失常引入，postcss-loader拿到之后 index.css 代码之后不须要额定解决就把代码交给了 css-loader，css-loader 解决 @import 的 test.css。也能够失常解析，不过没有通过 postcss-loader 解决，而间接交给了 style-loader 进行展现，对于这种状况，此时须要一个操作，css-loader拿到之后可能回退一步，交给 postcss-loader 重新处理，这里须要引入 importLoaders 属性更改 webpack 配置

  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          "style-loader",
          {
            loader:'css-loader',
            options:{importLoaders:1 // 回退一步}
          },
          'postcss-loader',
        ],
      },
      {
        test: /\.less$/,
        use: [
          "style-loader",
          "css-loader",
          'postcss-loader',
          "less-loader",
        ],
      },
    ],
  },

这样配置之后，就能够失常转换 css 代码，增加对应的浏览器前缀。做到兼容的目标

案例对应 package.json 配置版本

  "devDependencies": {
    "autoprefixer": "^10.3.1",
    "css-loader": "^6.2.0",
    "less": "^4.1.1",
    "less-loader": "^10.0.1",
    "style-loader": "^3.2.1",
    "postcss": "^8.3.6",
    "postcss-cli": "^8.3.1",
    "postcss-loader": "^6.1.1",
    "postcss-preset-env": "^6.7.0",
    "webpack": "^5.47.1",
    "webpack-cli": "^4.7.2",
  },

正文完