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. dos2unix、diff命令

    一.dos2unix:将DOS格式文件转化成UNIX格式文件 语法: dos2unix [选项] [文件...] [-n INFILE输出文件...]           unix2dos [选项] ...

  2. 面试常考的js题目（二）

    1. 已知 fn 为一个预定义函数,实现函数 curryIt,调用之后满足如下条件: 返回一个函数 a,a 的 length 属性值为 1(即显式声明 a 接收一个参数) 调用 a 之后,返回一个函数 ...

  3. Vue-CLI项目汇总

    Vue-CLI 项目搭建 Vue-CLI 项目在pycharm中配置 Vue-CLI 项目中相关操作 Vue-CLI项目中路由传参 Vue-CLI项目-vue-cookie与vue-cookies处理 ...

  4. JS基础_质数练习，用到了标记flag

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  5. BZOJ2456-mode题解--一道有趣题

    题目链接: https://www.lydsy.com/JudgeOnline/problem.php?id=2456 瞎扯 这是今天考的模拟赛T2交互题的一个30分部分分,老师在讲题时提到了这题.考 ...

  6. 分库分布的几件小事（五）MYSQL读写分离

    1.为什么进行读写分离 这个,高并发这个阶段,那肯定是需要做读写分离的,啥意思?因为实际上大部分的互联网公司,一些网站,或者是app,其实都是读多写少.所以针对这个情况,就是写一个主库,但是主库挂多个 ...

  7. djang部署vue项目

    1,将vue项目npm run build 在此之前需要修改打包后的js,css文件路径: 需新建vue.config.js 在文件中添加: module.exports = { // 输出目录 as ...

  8. javascript学习方法指南

    Javascript看似无限的可能性使得基于HTML和CSS的公共网站成为过去.然而,尽管JavaScript为用户提供了出色的动态体验,但它也为开发人员创建了一个雷区.因此,Javascript搜索 ...

  9. 自定义事件 Event 、CustomEvent的使用

    通过Event和dispathEvents触发自定义事件 <span id="btn">获取</span> <script> var event ...

  10. MySQL四舍五入函数ROUND(x)、ROUND(x,y)和TRUNCATE(x,y)

    MySQL四舍五入函数ROUND(x) ROUND(x)函数返回最接近于参数x的整数,对x值进行四舍五入. 实例: 使用ROUND(x)函数对操作数进行四舍五入操作.SQL语句如下: mysql> ...