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   

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


  • 2020-03-30 15:37:12

    PM2下使用 npm run 命令

    npm run xxxx 是 node常用的启动方式之一,本文介绍下如何用PM2来实现该方式的启动。 下面是项目的package.json文件部分代码:

  • 2020-04-01 10:15:11

    vue-cli3.0中vue.config.js的基本配置(去除esLint提示和解决build后静态文件路径报错)

    vue-cli是开发vue项目必不可少的脚手架工具,3.0版本之前的目录结构是由config目录的,关于webpack配置的文件都放在该目录里面,而3.0版本之后做了一个大更新,webpack相关的默认配置都帮你集成到webpack的npm 包里面去了,官方提供的一种修改配置的方式就是开发者自己在项目的根目录(与src同层级的目录)下建立一个vue.config.js的文件,然后去覆盖自定义的配置,达到你想要的效果,下面写一个基本的默认配置

  • 2020-04-01 10:21:20

    Vue extend $mount 构造器详解

    本节介绍两个 Vue.js 内置但却不常用的 API——extend 和 $mount,它们经常一起使用。不常用,是因为在业务开发中,基本没有它们的用武之地,但在独立组件开发时,在一些特定的场景它们是至关重要的。

  • 2020-04-01 15:36:52

    CSS3中的transition属性详解

    transition: property duration timing-function delay transition属性是个复合属性,她包括以下几个子属性: transition-property :规定设置过渡效果的css属性名称 transition-duration :规定完成过渡效果需要多少秒或毫秒 transition-timing-function :指定过渡函数,规定速度效果的速度曲线 transition-delay :指定开始出现的延迟时间