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. vue 组件来回切换时 记住上一个组件滚动位置(keep-alive)

    记住组件滚动状态: 使用场景:从某列表组件进入详情页,在返回的时候需要保留列表组件状态,包括滚动的高度.这个时候需要keep-alive配合. 方法一:如下情况导航在做普遍用法.前提是使用keep-a ...

  2. springmvc两种非注解的处理器适配器

    <?xml version="1.0" encoding="UTF-8"?> <web-app xmlns:xsi="http:// ...

  3. 初识Git(三)

    这次要记录一下对branch,merge的学习. 与先前一样创建一个pro文件夹,initi该文件夹,在该文件夹中新建一个空的MainCode.txt,然后add文本文件并且commit. 接下来我们 ...

  4. Remember the Word UVALive - 3942 DP_字典树

    每个小单词的长度都是小于等于100的,这是个重要的突破口. Code: #include <cstdio> #include <algorithm> #include < ...

  5. java中,length,length(),size()区别

    length——数组的属性: length()——String的方法: size()——集合的方法:

  6. .Net基础杂记

    1.面向对象程序思想 面向对象是程序开发的一种机制,特征为封装.继承.多态.以面向对象方式编写程序时,将复杂的项目抽象为多个对象互相协作的模型,然后编写模型结构,声明或实现类型的成员,即描述对象的特征 ...

  7. luogu P3795 钟氏映射(递推)

    题意 n<=107 20MB 题解 也就是给n个点,把他们一个分为一组,或两个分为一组,有多少种方法. 空间大点随便做. 我们靠递推. 一个新点,要不自己一组,要不和前面的一个点构成一组. 所以 ...

  8. Innodb中的事务隔离级别和锁的关系(转载)

    nodb中的事务隔离级别和锁的关系 原文:https://tech.meituan.com/innodb-lock.html ameng ·2014-08-20 15:50 前言: 我们都知道事务的几 ...

  9. 抓取豆瓣的电影排行榜TOP100

    #!/usr/bin/env python # -*- coding:utf-8 -*- """ 一个简单的Python爬虫, 用于抓取豆瓣电影Top前100的电影的名称 ...

  10. python 面向对象 继承

    什么是继承 继承表达的是一种”是“的关系,比如人是动物 继承是一种创建新类的方式,在python中,新建的类可以继承一个或多个父类,父类又可称为基类或超类,新建的类称为派生类或子类 继承是基于抽象的结 ...