Sass 轉換為 SCSS 需要安裝的環(huán)境

1、首先確保安裝了ruby

gem install sass

1

PUG 轉化 HTML 需要安裝的環(huán)境

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

創(chuàng)建React項目(名為my-app)

1、cnpm install -g create-react-app? ? ? ? ? #快速構建 React 開發(fā)環(huán)境

2、create-react-app my-app? ? ? ? ? ? ? ?#創(chuàng)建項目

3、cd my-app/? ? ? ? ? ? ? ? ? ? ? ? ? ? #進入創(chuàng)建項目文件夾

4、npm start? ? ? ? ? ? ? ? ? ? ? ? ? ? ?#啟動項目，瀏覽器打開(http://localhost:3000)測試

1

2

3

4

React整體目錄結構說明

node_modules： 包含了react項目中會用到的一些組件

**public：**里面包含了我們項目中的啟動頁面(主入口頁面index.html)

**src：**里面包含了一些我們自己使用的js文件，css文件，img文件等等(系統(tǒng)默認將index.html對準了index.js，index.js也就是我們的入口js，他和index.html所對應)

package.json：項目的配置文件

注意：React支持scss和css，sass需先轉化為scss，不支持pug,pug文件格式需先轉化為html格式

React中 Sass和Scss 引入

1、安裝環(huán)境

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

注意：此命令不可批量轉換

總結

以上是生活随笔為你收集整理的html转化pug,pug转化html,sass转化scss的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。