1. webstrom打开多个项目

默认情况下一次只能打开一个项目，如果需要打开多个就按照下面的方法：

Preferences -> Directories -> Add Content Root

添加你需要的工程目录。

2. 编译Less Sass Scss

https://www.jetbrains.com/help/webstorm/compiling-sass-less-and-scss-to-css.html

http://www.jianshu.com/p/33c292578c9b

3.编译 PostCss

Node 全局安装 postcss,postcss-cli,postcss-cssnext,cssgrace

安装postcss插件

>npm install -g postcss

安装postcss-cli命令行插件

>npm install -g postcss-cli

安装postcss-cssnext插件(核心:包括浏览器前缀等)

>npm install -g postcss-cssnext

安装cssgrace(IE浏览器兼容插件)

>npm install -g cssgrace

在Webstorm 下安装postcss插件

Preferences | Plugins – just search for PostCSS.

在Webstorm中添加postcss外部工具

Preferences | Tools | External Tools + 

  • Name: 可以自己定义

  • Program:填入你的postcss-cli 的PATH   可用 which postcss 命令查看路径

  • Parameters: -u postcss-cssnext -o $FileDir$/$FileNameWithoutExtension$.css $FileDir$/$FileName$

　　   将 $FileDir$/$FileName$ 用postcss-cssnext 这个插件转换输出到 $FileDir$/$FileNameWithoutExtension$.css 中

　　　可以根据你自己的需要配置编译后的文件路径，具体参见https://github.com/code42day/postcss-cli

  • Working directory: $ProjectFileDir$

配置好后，在pcss文件上右键，在右键菜单中点击External Tools – postcss，即可编译。

右键不方便的话，可以设置个快捷键，打开Webstorm设置，Preferences -> Keymap ， 搜索External Tools ， 配置 postcss 即可。 不与原来的命名冲突就可以了。

参考网站：http://www.css88.com/archives/5670

webstorm 使用指南的更多相关文章

  1. Webstorm常用快捷键备忘(Webstorm入门指南)

    WebStorm 是jetbrains公司旗下一款JavaScript 开发工具.被广大中国JS开发者誉为“Web前端开发神器”.“最强大的HTML5编辑器”.“最智能的JavaSscript IDE ...

  2. 工程和界面—Webstorm入门指南 Webstorm中的工程-备

    1.新建工程 “Quick Start”界面新建工程: 也可以点击顶部菜单栏“File”-> “New Project”. 弹出如下界面: “Location”指向想要创建的工程目录(如果该目录 ...

  3. 常用快捷键—Webstorm入门指南

    提高代码编写效率,离不开快捷键的使用,Webstorm拥有丰富的代码快速编辑功能,你可以自由配置功能快捷键. 快捷键配置 点击“File”-> “settings” Webstorm预置了其他编 ...

  4. Webstorm10.0.3破解程序及汉化包下载、Webstorm配置入门指南

    核心提示: WebStorm 是jetbrains公司旗下一款JavaScript 开发工具.被广大中国JS开发者誉为“Web前端开发神器”.“最强大的HTML5编辑器”.“最智能的JavaSscri ...

  5. WebStorm破解方法

    http://www.jianshu.com/p/85266fa16639 http://idea.lanyus.com/ webstorm 入门指南 破解方法 1. 下载的WebStorm http ...

  6. 常用快捷键—Webstorm

    常用快捷键—Webstorm入门指南 提高代码编写效率,离不开快捷键的使用,Webstorm拥有丰富的代码快速编辑功能,你可以自由配置功能快捷键. 快捷键配置 点击“File”-> “setti ...

  7. WebStorm编辑器

    Webstorm的安装和免费使用 IntelliJ IDEA 注册码 (webstorm注册码):http://idea.lanyus.com/ (已经不能获取注册码了,之前的注册码可以重复使用) 安 ...

  8. Webstorm常用快捷键备忘

    WebStorm 是jetbrains公司旗下一款JavaScript 开发工具.被广大中国JS开发者誉为“Web前端开发神器”.“最强大的HTML5编辑器”.“最智能的JavaSscript IDE ...

  9. nodejs + socket.io + redis 新手上路

    最近要更新网站架构了,决定转入 nodejs + socket.io + redis 方式. 战斗刚开始: 网上的文章太松散,我根据各个网友的分享进行整理 ,让大家可以方便上手. 进入node.js之 ...

随机推荐

  1. Thinkphp5 自定义上传文件名

    这几天在做tp5的上传文件模块,项目需求是要把文件名在上传之后修改为 用户名+原文件名的组合形式,在网上找了一会儿发现好像没有类似的文章...只好自己去研究研究了. 之前查看过看云上面的官方手册,文件 ...

  2. Redis主从及哨兵

    Redis主从用法 像MySQL一样,redis是支持主从同步的,而且也支持一主多从以及多级从结构. 主从结构,一是为了纯粹的冗余备份,二是为了提升读性能,比如很消耗性能的SORT就可以由从服务器来承 ...

  3. 怎样使用 v-for ?

    v-bind / v-on / v-if / v-for , 这四个指令应该是 vue 里面最常用的了, 之前已经简单记录的前三个的使用方法, 接下来就记一下 v-for 的基本用法. 1. v-fo ...

  4. 一行python能干什么？

    我们都知道,python作为一个编程语言,它有一个最大的优势就是代码简短,那么一行python代码能实现哪些操作呢?一起来看看吧! 1.打印Hello World! 这是最基础的,相信不管学习哪一门语 ...

  5. vue 登录 + 记住密码 + 密码加密解密

    <template> <el-form :model="ruleForm"> <h3 class="title">系统登录& ...

  6. 销售订单(SO)-API-给已有的销售订单增加一行

    在已存在的OM订单中增加一物料: PROCEDURE insert_new_so_api(p_return_code OUT VARCHAR2, p_return_msg OUT VARCHAR2) ...

  7. linux下内存检测工具的使用和对比

    linux背后隐藏着各种丰富的工具,学会这些工具,让这些工具更好地服务于我们的项目开发,不仅可以提高工作的效率,而且可以增强个人技术力. 参考:http://blog.chinaunix.net/ui ...

  8. ActiveMQ入门操作示例

    1. Queue 1.1 Producer 生产者:生产消息,发送端. 把jar包添加到工程中. 第一步:创建ConnectionFactory对象,需要指定服务端ip及端口号. 第二步:使用Conn ...

  9. another-redis-desktop-manager

    brew cask install another-redis-desktop-manager

  10. 怎么处理系统蓝屏后提示代码0x000000d1的错误？

    电脑开机有时会出现蓝屏,导致蓝屏的原因有很多,每种错误都有不同的代码.下面就来和大家分享一下电脑开机蓝屏出现0x000000d1错误代码是什么原因?我们又该怎么去解决这个问题. 电脑开机蓝屏出现0x0 ...