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   

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


  • 2018-03-20 22:01:18

    Java如何进行Base64的编码(Encode)与解码(Decode)?

    Base64是一种能将任意Binary资料用64种字元组合成字串的方法,而这个Binary资料和字串资料彼此之间是可以互相转换的,十分方便。在实际应用上,Base64除了能将Binary资料可视化之外,也常用来表示字串加密过后的内容。如果要使用Java 程式语言来实作Base64的编码与解码功能,可以参考本篇文章的作法。

  • 2018-03-20 23:38:05

    PHP中json_encode与json_decode

    json_encode() 对变量进行JSON编码,json_decode() 对JSON数据进行解码,转换为PHP变量

  • 2018-03-21 22:26:03

    Android BASE64Encoder不能用的问题

    昨天项目与后台交互的接口传参数需要加密,用的是BASE64Encoder加密,可是这个类不能用,谷歌了一下说的是:

  • 2018-03-21 22:28:02

    Java加密算法 AES

    AES 算法 对称加密,密码学中的高级加密标准 2005年成为有效标准

  • 2018-03-24 13:23:26

    Only the original thread that created a view hierarchy can touch its views

    很多网友在Android中使用多线程处理UI相关内容时可能会发现Logcat提示Only the original thread that created a view hierarchy can touch its views这样的错误,这主要是Android的相关View和控件不是线程安全的,我们必须做独立的处理这点比J2ME麻烦一些,这里Android给 我们提供了很多方法,有关线程的

  • 2018-03-26 18:05:09

    MYSQL OR与AND一起 的用法

    查询结果是id = 2且age = 20或者id=1SELECT * from student WHERE id = 1 or id = 2 AND age = 20;12

  • 2018-03-27 11:27:09

    Java中Set集合的使用

    Set类继承了Conllection类,是一种集合类。Set的实现类有三个,下面我们会一一来说这些的不一样。

  • 2018-03-27 11:36:58

    Java中数组、List、Set互相转换

    需要注意的是, Arrays.asList() 返回一个受指定数组决定的固定大小的列表。所以不能做 add 、 remove等操作,否则会报错。