zoukankan      html  css  js  c++  java
  • Webstorm配置autoprefixer 自动补全兼容前缀

    webstorm内置CSS3自动补全功能

    本文来自:http://blog.csdn.net/pugongying520/article/details/52712639
    eg:在样式文件border-radius过程中会出现加前缀的样式,敲回车键即可

    [css] view plain copy
     
    1. <span style="font-family:Microsoft YaHei;">div {  
    2.     -webkit-border-radius:50%;  
    3.     -moz-border-radius:50%;  
    4.     border-radius:50%;  
    5. }</span>  



    但某些样式语句不能自动补全,如
    输入display: flex;


    Autoprefixer是一个后处理程序,不象Sass以及Stylus之类的预处理器。它适用于普通的CSS,可以实现css3代码自动补全。


    使用方法:
    step1:安装node.js (http://jingyan.baidu.com/article/b0b63dbfca599a4a483070a5.html)


    step2:安装Autoprefixer  npm install autoprefixer -g


    step3:安装postcss-cli  npm install postcss-cli -g

    step4:设置webstorm External Tools

    打开webstorm->File->搜索External Tools->点击‘+’,设置Edit Tool


    Name:autoprefixer 

    Tool settings

           Program: 找到AppData下的文件postcss.cm  若找不到AppData,在地址栏输入%appdata%回车即可

           Parameters:-u autoprefixer -o outputFile inputFile  注意文件顺序输出文件及输入文件 ,输入文件需要先新建,不能自动生成

           Working directory:文件目录即可,可根据自己需要调整

    写具体配置,例如我的配置,如图:

    1. Program:填入你的postcss-cli 的PATH;
    2. Parameters: -u autoprefixer -o $FileDir$$FileName$  $FileDir$$FileName$ ,你可以根据你自己的需要配置,具体参见https://github.com/code42day/postcss-cli
    3. Working directory :$ProjectFileDir$

    step5:运行

    在输出文件中点击右键->autoprefixer ,即可生成新增兼容前缀的文件


     

    设置快捷键


     

  • 相关阅读:
    6.linux下指定项目使用特定jdk
    5.linux 执行shell报bad interpreter:No such file or directory错误
    定时任务基础版本
    同一台电脑安装两个jdk切换问题
    接口如何设计?安全如何保证?签名如何实现?防重如何实现?
    spring boot常见get 、post请求参数处理
    bat例子
    1.Volatile关键字详解
    1.linux目录
    解析xml报文,xml与map互转
  • 原文地址:https://www.cnblogs.com/zhou195/p/6978439.html
Copyright © 2011-2022 走看看