1. webstrom IDE 的 setting (快捷键 Ctrl + Alt  + S)
  2. Tool -- External tool (绿色 + 添加)

   3.填写 必要的项目 后 apply

   

   备注:Name: 显示的名称

      Programs: postcss.cmd 的全局安装下的路径

      Paramters: -u autoprefix -o 输出文件  输入文件 (上面表示在输入输出都在同一个文件上并添加操作)

      Working directory: 在项目下即可

   4.添加快捷键 Keymap中 找到 External tool 文件目录下 有自己添加的工具插件 点autoprefixer 鼠标右键 选 ‘Add KeyBorad shortcut’

    

    设置没有给引用的键 (或组合)即可

    5.运行 插件效果

    

    若出现没有报错:输入有效的文件列表路径 证明你的 Paramters 参数写错了!  正确: $FileDir$/$FileName$(路径  / 文件名),对这上面配置就可以了!

    前提要通过npm全局安装 下面的两个包

    (1) npm install autoprefixer  -g

    (2) npm install pastcss-cli  -g

    大功告成!

webstorm 添加 autoprefixer 工具为CSS加前缀的更多相关文章

  1. 还在手动给css加前缀?no!几种自动处理css前缀的方法简介

    原文首发于个人博客:还在手动给css加前缀?no!几种自动处理css前缀的方法简介 我们知道在写css的时候由于要兼容不同厂商浏览器,一些比较新的属性需要给它们添加厂商前缀来兼容.移动端还好,基本只要 ...

  2. webstorm 添加css前缀(兼容)自动添加

    Webstorm自动添加css前缀( 兼容) 百度了很多在webstorm中添加css前缀(兼容)自动添加,autoprefixer插件是首选,对于基本的css,还有less都支持,所以就选择了aut ...

  3. vue-loader 调用了cssLoaders方法配置了css加载器属性。

    module: { loaders: [ // 这里也是相应的配置,test就是匹配文件,loader是加载器, { test: /\.vue$/, loader: 'vue' }, { test: ...

  4. CSS 加载新方式

    Chrome 浏览器有意改变<link rel="stylesheet">的加载方式,当其出现在<body>中时,这一变化将更加明显.笔者决定在本文中进行详 ...

  5. 发布时一键添加html中的css标签和script标签版本号来防止浏览器缓存

    AppendFileVersion 是一个VSIX插件支持vs2015意以上版本 是我用来发布时一键添加html中的css标签和script标签版本号来防止浏览器缓存 分享给大家! download ...

  6. Map工具系列-05-添加业务参数工具

    所有cs端工具集成了一个工具面板 -打开(IE) Map工具系列-01-Map代码生成工具说明 Map工具系列-02-数据迁移工具使用说明 Map工具系列-03-代码生成BySQl工具使用说明 Map ...

  7. 为网格布局图片打造的超炫 CSS 加载动画

    今天,我想与大家分享一些专门为网格布局的图像制作的很酷的 CSS 加载动画效果.您可以把这些效果用在你的作品集,博客或任何你想要的网页中.设置很简单.我们使用了下面这些工具库来实现这个效果: Norm ...

  8. 百度地图API示例之添加/删除工具条、比例尺控件

    代码 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" cont ...

  9. css加载会造成阻塞吗?

    终于考试完了,今天突然想起来前阵子找实习的时候,今日头条面试官问我,js执行会阻塞DOM树的解析和渲染,那么css加载会阻塞DOM树的解析和渲染吗?所以,接下来我就来对css加载对DOM树的解析和渲染 ...

随机推荐

  1. Linux就该这么学 20181005(第九章SSH远程对话)

    参考链接https://www.linuxprobe.com/ nmtui开启网卡设置 ONBOOT=yes systemctl restart network nmcli connection sh ...

  2. Kali linux 2016.2 的 plyload模块之meterpreter plyload详解

    不多说,直接上干货! 前期博客 Kali linux 2016.2(Rolling)中的payloads模块详解 当利用成功后尝试运行一个进程,它将在系统进程列表里显示,即使在木马中尝试执行系统命令, ...

  3. .Net垃圾回收和大对象处理

    本文引自:http://www.cnblogs.com/yukaizhao/archive/2011/11/21/dot_net_gc_large_object_heap.html CLR垃圾回收器根 ...

  4. word2tex之类的问题

    首先就是这个word2tex一般是在word和tex文本互相转换的时候用的. 以前win7下用的chikrii忘了使用方法.. 之后再win10下用的excel2tex,但是转换时候总感觉不如word ...

  5. Android APP 调试过程中遇到的问题。

    调试过过程中APP安装完启动后有的时候会异常退出,报这个错误.有的时候可以直接启动.查找不到原因.网上说把commit方法替换成commitAllowingStateLoss() 也无效. Andro ...

  6. js 40 个技巧

    1. oncontextmenu="window.event.returnValue=false" 将彻底屏蔽鼠标右键<table border oncontextmenu= ...

  7. bind方法使用案例

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. @RequestMapping[转]

    转自 http://www.cnblogs.com/qq78292959/p/3760560.html#undefined 引言: 前段时间项目中用到了RESTful模式来开发程序,但是当用POST. ...

  9. php报错权限设置

    <?php //禁用错误报告 error_reporting(0); //报告运行时错误 error_reporting(E_ERROR | E_WARNING | E_PARSE); //报告 ...

  10. canvas 连线曲线图封装

    $.fn.hChart=function (opt) { var setting=$.extend({ className:'', data:[] },opt); var tbody=this; va ...