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. linux下安装anconda3

    Liunx下安装anconda3其实特变简单,只需这几步骤 1.  首先要到网上下载一个ancoda3的安装包.然后在上传到linux上面即可 3. 是不是特别简单呢?哈哈

  2. Thrift Oneway是什么？

    网上很多文章,都有各种涉及使用 oneway 的,基本是一个THRIFT IDL示例接口前面加 oneway.看完之后对 oneway的理解还是很模糊,于是看了下Thrift的代码,终于搞懂了 one ...

  3. python内置函数0-1

    # a=bool(None)# print(a) class Foo: def __repr__(self): return 'bbbbbbb'f = Foo()ret = ascii(f)print ...

  4. X86逆向6：易语言程序的DIY

    易语言程序在中国的用户量还是很大的,广泛用于外挂的开发,和一些小工具的编写,今天我们就来看下如何给易语言程序DIY,这里是用的易语言演示,当然这门技术也是可以应用到任何一门编译型语言中的,只要掌握合适 ...

  5. Leaflet个人封装笔记

    <!DOCTYPE html> <html> <head> <link href="style/leaflet.css" type=&qu ...

  6. c#操作word书签

    因项目需要,给word文档的书签赋值,框架没有相关内容,于是自己上网加上查看文档,成功搞定该功能.下面是我的实现过程: 首先需要引用nuget包: Microsoft.Office.Interop.W ...

  7. 洛谷题解P4314CPU监控--线段树

    题目链接 https://www.luogu.org/problemnew/show/P4314 https://www.lydsy.com/JudgeOnline/problem.php?id=30 ...

  8. 【Javascript】 js的构造函数与原形对象的关系

    构造函数只是提供了一个创建对象的模板,它并不是对象的原形. 对象的原形是构造函数的原形,即object. ----------------------------------------------- ...

  9. npm安装淘宝镜像cnpm

    在cmd中执行 npm install -g cnpm --registry=https://registry.npm.taobao.org

  10. elementui按需加载

    定义一个ele.js文件 官网:https://element.eleme.io/#/zh-CN/component/quickstart // 方法1 import 'element-ui/lib/ ...