Node.js+ Npm +Npx
Npx是執(zhí)行Node.js插件的工具购城，它可以執(zhí)行npm包中包含的命名
Npx-v
如果發(fā)現(xiàn)沒有npx成黄，可以執(zhí)行 npm i npx -g
項(xiàng)目目錄下執(zhí)行 npm init生成pack.json 文件
postcss
它可以被理解為一個(gè)平臺(tái)匀油，可以讓一些插件在上面跑 它提供了一個(gè)解析器，可以將CSS解析成抽象語(yǔ)法樹 通過PostCSS這個(gè)平臺(tái)茵宪，我們能夠開發(fā)一些插件，來處理CSS缤削。熱門插件如autoprefixer
npm install -g postcss-cli
執(zhí)行 npx postcss src/tuitui-ui.css -o dist/tuitui-ui.css 測(cè)試一下
可以看到在根目錄下生成了一個(gè)dits目錄,里面就是生成的tuitui-ui. 但是命名行里面會(huì)提醒你，沒有使用任何插件吹榴，最后生成的文件基本沒有處理,只是在文件的最后加了個(gè)sourceMapping亭敢。
對(duì)@Import的處理
這里要使用"postcss-import"插件，這個(gè)插件可以把@Import的處理方式引入的本地路徑轉(zhuǎn)變成這個(gè)路徑里的css語(yǔ)句图筹。這樣處理后帅刀，所以的文件樣式就會(huì)被集中到目標(biāo)文件里,@Import只剩下一個(gè)遠(yuǎn)程的路徑,項(xiàng)目本地的@Import就沒有了。
安裝插件
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
