webstrom编辑器scss环境以及ES6环境配置

1、SCSS环境配置

第一步：安装ruby环境并使用gem install sass 安装sass（国内访问较慢，最好翻墙安装），如果不能翻墙则可以更换源路径

更换方式：

gem sources --remove https://rubygems.org/复制代码

gem sources -a http://gems.ruby-china.com/复制代码

或者

gem sources -a https://gems.ruby-china.com/复制代码

gem install sass复制代码

第二步：在WebStrom编辑器中选择File->Settings->File Watchers添加SCSS配置项

第三步：修改下面两个地方：

'Arguments': --no-cache --update --sourcemap --watch $FileName$:$FileNameWithoutExtension$.css复制代码

另一处：

'Output paths to refresh': $FileNameWithoutExtension$.css:$FileNameWithoutExtension$.css.map复制代码

修改完保存，现在新建'style.scss'后就会自动生成'style.css'和'style.css.map'

碰到的问题以及解决方法：

问题1：如果想把SCSS源文件与生成后的CSS和map文件分开目录，则如下设置：

'Arguments': --no-cache --update --sourcemap --watch $FileName$:$FileParentDir$\css\$FileNameWithoutExtension$.css复制代码

问题2：如果编译不了，并出现乱码问题：

找到ruby的安装目录并找到sass模块，修改文件目录下的 （C:/Ruby/lib/ruby/gems/1.9.1/gems/sass-3.3.14/lib/sass ）
engine.rb这个文件，在所有的require XXXX 之后添加

Encoding.default_external = Encoding.find('utf-8')复制代码

即可 。

问题3：默认生成的csss是nested模式的，如果想换成其他模式（expanded、compact、compressed）怎么换？

Arguments:--no-cache --update --sourcemap --watch $FileName$:$FileParentDir$\css\$FileNameWithoutExtension$.css --style compact复制代码

几种模式效果如图所示：

2、ES6环境配置

第一步：全局安装babel-cli

cnpm install -g babel-cli复制代码

第二步：在项目下执行命令npm init 创建一个package.json文件

npm init 复制代码

第三步：项目目录下安装babel-preset-es2015

npm install babel-preset-es2015 --save-dev复制代码

第四步：在IDE中选择File-->Settings-->Languages&Frameworks-->JavaScript JavaScript language version 选择ECMAScript 6.

第五步：File-->Settings-->Tools-->Files Watchers 中加上Babel，配置Babel解析

第六步：修改生成路径

Arguments改为：

--source-maps --out-file $FileParentDir$\compiled\$FileNameWithoutExtension$.js --presets es2015 $FilePath$复制代码

Output paths to refresh 改为：

$FileNameWithoutExtension$.js:$FileNameWithoutExtension$.js.map复制代码

3、如果有疑问，请联系

转载于:https://juejin.im/post/5cd39bba6fb9a0323d6e1ee7