一、postcss-loader有什么用?
PostCSS 本身是一个功能比较单一的工具。它提供了一种方式用 JavaScript 代码来处理 CSS。它负责把 CSS 代码解析成抽象语法树结构(Abstract Syntax Tree,AST),再交由插件来进行处理。插件基于
CSS 代码的 AST 所能进行的操作是多种多样的,比如可以支持变量和混入(mixin),增加浏览器相关的声明前缀,或是把使用将来的 CSS 规范的样式规则转译(transpile)成当前的 CSS 规范支持的格式。从这
个角度来说,PostCSS 的强大之处在于其不断发展的插件体系。
在webpack4. 的配置里面,切记版本不同,postcss-loader的配置会有相应的变化。我们要使用浏览器自动补全工具首先要安装 postcss-loader并配合autoprefixer插件。
(1)首先将两个必要插件安装到本地依赖。
npm i postcss-loader autoprefixer -D
(2) 在 webpack 中配置 module,
module:{ test: /.less$/, use: [ 'style-loader' 'css-loader', 'postcss-loader', 'less-loader', ] }
(3) 创建 postcss.config.js文件
module.exports = { plugins: [ require('autoprefixer')({ overrideBrowserslist: [ "Android 4.1", "iOS 7.1", "Chrome > 31", "ff > 31", "ie >= 8", "> 1%", // 必须大于 1% 用户使用的浏览器 //'last 2 versions', // 所有主流浏览器最近的 2个版本 ], grid: true }) ] }
当
当然还有另外一种配置 postcss-loader 的方式
在 package.json 文件 加:
"browserslist": [ "defaults", "not ie < 11", "last 2 versions", "> 1%", "iOS 7", "last 3 iOS versions" ],
然后 创建 postcss.config.js
module.exports = { plugins: [ require('autoprefixer')() ] }
相信到这里你就会使用 浏览器自动补全工具啦
1.《如何配置webpack让浏览器自动补全前缀》援引自互联网,旨在传递更多网络信息知识,仅代表作者本人观点,与本网站无关,侵删请联系页脚下方联系方式。
2.《如何配置webpack让浏览器自动补全前缀》仅供读者参考,本网站未对该内容进行证实,对其原创性、真实性、完整性、及时性不作任何保证。
3.文章转载时请保留本站内容来源地址,https://www.cxvn.com/study/26901.html