参考地址 pug转化html,sass转化scss
Sass 转换为 SCSS 需要安装的环境
1、首先确保安装了ruby
gem install sass
1
PUG 转化 HTML 需要安装的环境
1、首先安装了node.js
npm install -g pug
npm install -g pug-cli
1
2
将 Sass 转换为 SCSS
//一般命令
$ sass-convert Before.sass After.scss
(可指定目录生成SCSS文件)--一下转换Sass和CSS用法一样
//指定目录生成SCSS文件
$ sass-convert style.sass C:\Users\admin\ceshi\style.scss
1
2
3
4
5
将 SCSS 转换为 Sass
$ sass-convert Before.scss After.sass
1
将 Sass 转换为 CSS
$ sass --watch Before.scss:After.css
1
将 pug 转换为 html（html生成到当前目录）
$ pug -P test.pug
1
将 pug 转换为 html(可指定目录生成html)
实例：
$ pug -P test.pug -o C:\Users\admin\ceshi
1
2
创建React项目(名为my-app)
1、cnpm install -g create-react-app #快速构建 React 开发环境
2、create-react-app my-app #创建项目
3、cd my-app/ #进入创建项目文件夹
4、npm start #启动项目，浏览器打开(http://localhost:3000)测试
1
2
3
4
React整体目录结构说明
node_modules： 包含了react项目中会用到的一些组件
**public：**里面包含了我们项目中的启动页面(主入口页面index.html)
**src：**里面包含了一些我们自己使用的js文件，css文件，img文件等等(系统默认将index.html对准了index.js，index.js也就是我们的入口js，他和index.html所对应)
package.json：项目的配置文件
注意：React支持scss和css，sass需先转化为scss，不支持pug,pug文件格式需先转化为html格式
React中 Sass和Scss 引入
1、安装环境
npm install node-sass sass-loader --save
1
2、文件为Sass时需先使用命令 sass-convert Before.sass After.scss 转化为Scss文件
即可在index.js文件中引入 import ‘./index.scss’
3、文件为Scss时可直接在index.js文件中引入 import ‘./index.scss’
4、pug文件转化为html文件
可直接使用命令# 将 pug 转换为 html（html生成到当前目录）
$ pug -P test.pug
# 将 pug 转换为 html(可指定目录生成html)
实例：
$ pug -P test.pug -o C:\Users\admin\ceshi
注意：此命令不可批量转换