pug转化html,sass转化scss

2020-02-26 20:12:24

参考地址 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   

   注意:此命令不可批量转换


  • 2019-01-30 17:53:21

    视图与临时表

    视图与表的不同之处:视图是一个虚表,即视图所对应的数据不进行实际存储,数据库只存储视图的定义,对视图的数据进行操作时,系统根据视图的定义去操作与视图相关联的基本表。

  • 2019-02-01 08:43:59

    JS 随机排序算法

    使用JS编写一个方法 让数组中的元素每次刷新随机排列

  • 2019-02-12 16:36:23

    图片工具GraphicsMagick的安装配置与基本使用

    GraphicsMagick是一个短小精悍的的图片处理工具和库集合。对于Java开发者来说,常用的图片处理工具有3个,JDK自带的图片处理库,ImageMagick,GraphicsMagick。JDK自带的图片处理库,虽稳定简单,性能却比较差;ImageMagick是目前最流行的图片处理工具,它的功能非常丰富;GraphicsMagick的功能略逊于ImageMagick,但是它的效率更强悍,但大多数情况下,GM的功能已经足够使用了。

  • 2019-02-15 10:35:31

    使用ffmpeg转码m3u8并播放

    m3u8是苹果公司开发的一项新型播放格式,这种播放格式支持目前市面的windows、androis、ios设备主流的浏览器,同样的视频文件既可以在flash环境播放,又能在无flash的html5环境播放,它的优势还不止于此,它可以实现多种码率在不同网速下的自动切换,网速好自动切换高清晰度视频,网速慢自动播放低清晰度文件,还可以实现流加密(视频文件本身加密)、分段下载播放、任意时间点拖拽播放、随机视频文件广告插入等等优势,所以公司打算是用m3u8格式作为视频格式。 --------------------- 作者:悠闲咖啡007 来源:CSDN 原文:https://blog.csdn.net/psh18513234633/article/details/79312607 版权声明:本文为博主原创文章,转载请附上博文链接!