Node.js+ Npm +Npx

Npx是執(zhí)行Node.js插件的工具，它可以執(zhí)行npm包中包含的命名

Npx-v

如果發(fā)現(xiàn)沒(méi)有npx，可以執(zhí)行 npm i npx -g
項(xiàng)目目錄下執(zhí)行 npm init生成pack.json 文件

postcss

它可以被理解為一個(gè)平臺(tái)，可以讓一些插件在上面跑 它提供了一個(gè)解析器，可以將CSS解析成抽象語(yǔ)法樹(shù) 通過(guò)PostCSS這個(gè)平臺(tái)，我們能夠開(kāi)發(fā)一些插件，來(lái)處理CSS。熱門(mén)插件如autoprefixer

npm install -g postcss-cli

執(zhí)行 npx postcss src/tuitui-ui.css -o dist/tuitui-ui.css 測(cè)試一下

可以看到在根目錄下生成了一個(gè)dits目錄,里面就是生成的tuitui-ui. 但是命名行里面會(huì)提醒你，沒(méi)有使用任何插件，最后生成的文件基本沒(méi)有處理,只是在文件的最后加了個(gè)sourceMapping。

對(duì)@Import的處理

這里要使用"postcss-import"插件，這個(gè)插件可以把@Import的處理方式引入的本地路徑轉(zhuǎn)變成這個(gè)路徑里的css語(yǔ)句。這樣處理后，所以的文件樣式就會(huì)被集中到目標(biāo)文件里,@Import只剩下一個(gè)遠(yuǎn)程的路徑,項(xiàng)目本地的@Import就沒(méi)有了。

安裝插件

npm install postcss-import

執(zhí)行命名

npx postcss src/tuitui-ui.css -o dist/tuitui-ui.css -u postcss-import --no-map

"-u postcss-import"是表示在使用 postcss處理文件時(shí)使用postcss-import插件 --no-map去掉文件后面的sourceMapping信息

對(duì)兼容性處理 Autoprefixer

npm i autoprefixer@9.6.1 -D

安裝后使用插件

npx postcss src/tuitui-ui.css -o dist/tuitui-ui.css -u postcss-import autoprefixer --no-map

壓縮css

安裝插件

npm i cssnano@4.1.10 -D

執(zhí)行命名

npx postcss src/tuitui-ui.css -o dist/tuitui-ui.min.css -u postcss-import autoprefixer cssnano --no-map

min.css.png