還是延續(xù)上節(jié)的內(nèi)容黑毅，
webpack如何處理less嚼摩、sass這種預(yù)編譯樣式文件。
本節(jié)的內(nèi)容主要是postcss的運(yùn)用矿瘦，postcss很強(qiáng)大枕面，我們小試牛刀用它來實(shí)現(xiàn)在不同的瀏覽器中為我們自動添加前綴如-webkit-、-moz-等等以做兼容缚去。
git倉庫：webpack-demo
1潮秘、處理sass
- 繼續(xù)沿用上一章的代碼放置新建文件夾
chapter6下。 - 首先易结，我們需要安裝處理
sass文件相關(guān)的loader->webpack之sass-loader枕荞。
$ cd chapter6
$ npm install sass-loader node-sass --save-dev
- 然后我們需要在
webpack.config.js中配置它。
...
module: {
rules: [
// 處理sass
{
test: /\.s[ac]ss$/i,
use: [
"style-loader",
"css-loader",
"sass-loader" // 將 Sass 編譯成 CSS搞动，默認(rèn)使用 Node Sass
]
},
]
}
...
2躏精、新建
- 進(jìn)入到項(xiàng)目中在
src/styles下新建content.scss文件，用來測試鹦肿。
webpack-demo/chapter6
...
|- /src
|- /assets
|- /styles
|- header.css
+ |- content.scss
|- logo.js
|- header.js
|- content.js
|- footer.js
|- index.js
|- header.css
|- index.html
|- package.json
|- webpack.config.js
...
- 在
content.js中隨便輸入幾行`sass語法：
body {
.content {
background: green;
}
}
- 在
src/content.js中給這個塊級元素添加一個.content類名矗烛。
export function createContent() {
const div = document.createElement("div");
div.innerText = "主體內(nèi)容";
+ div.classList.add("content");
document.body.appendChild(div);
}
- 在
src/index.js模塊中引入這個content.scss文件。
import { createLogo } from "./logo";
import { createHeader } from "./header";
import { createContent } from "./content";
import { createFooter } from "./footer";
import "./styles/header.css";
+ import "./styles/content.scss";
createLogo();
createHeader();
createContent();
createFooter();
- 然后我們
npm run build打包后再打開dist/index.html就可以看到內(nèi)容塊的新增的綠色背景樣式了箩溃。這樣就證明我們的sass處理打包就成功了瞭吃。
3碌嘀、處理less
過程與上同理，在
src/styles目錄下新建用來測試的相關(guān)footer.less文件并在src/index.js中引入它用來測試看效果虱而，就不浪費(fèi)篇幅了筏餐，具體可以看倉庫代碼。安裝并配置
less-loader牡拇，然后打包刷新瀏覽器就可以看到效果了魁瞪。
$ npm install less less-loader --save-dev
...
module: {
rules: [
...
// 處理less
{
test: /\.less$/,
use: ["style-loader", "css-loader", "less-loader"]
},
...
]
}
...
4、安裝postcss
- 現(xiàn)在我們有這么一個常見的需求場景惠呼，比如說當(dāng)我們使用
css3新特性的時候导俘，我們需要根據(jù)不同的瀏覽器自動加上瀏覽器前綴如-webkit-、-moz-等等以做兼容剔蹋。怎么處理旅薄？先動手用一下，后面再來小結(jié)泣崩，先安裝postcss:
$ npm i postcss-loader --save-dev
- 然后我們還需要安裝能給我們
css3自動添加瀏覽器前綴的插件autoprefixer少梁。
$ npm install autoprefixer --save-dev
- 在
src/styles/content.scss中寫點(diǎn)css3語法用來測試。
.header {
background: green;
+ box-shadow: 0 0 20px green;
}
4矫付、配置postcss
- 在
chapter6目錄下新建一個postcss.config.js文件并配置添加這個剛剛安裝的autoprefixer插件凯沪。
webpack-demo/chapter6
...
|- /src
|- index.html
|- package.json
+ |- postcss.config.js
|- webpack.config.js
...
+ module.exports = {
+ plugins: {
+ "autoprefixer": {}
+ }
+ };
- 去
webpack.config.js中配置這個post-loader。我這里以應(yīng)用scss文件為例买优，其它樣式文件也是一樣的配置妨马，詳見源碼。（這個loader放置的位置順序要注意一下）
...
module: {
rules: [
// 處理sass
{
test: /\.s[ac]ss$/i,
use: [
"style-loader",
"css-loader",
+ "postcss-loader", // 因?yàn)檫@里處理的是css文件杀赢，所以要放在sass-loader的上面
"sass-loader"
]
},
]
}
...
- 到了這一步烘跺，基本配置就完成了，但是還有一個東西一定要記得設(shè)置脂崔，不然壓根沒效果滤淳。進(jìn)入到
package.json中，我們要設(shè)置所支持的瀏覽器列表脱篙，切記＝壳！０砝А（這一步很重要文搂，我就是忘記設(shè)置這一步，導(dǎo)致一直沒效果秤朗，找了很久的問題Ｃ翰洹！！）
{
...
+ "browserslist": [
+ "> 1%",
+ "last 2 versions"
+ ]
...
}
- 然后我們輸入命令打包硝皂，在瀏覽器中打開
dist/index.html就可以看到自動為我們添加好了前綴了常挚。
4、小結(jié)
- Ok稽物，小結(jié)一下奄毡，對于
less和sass的處理很簡單，不過是上一節(jié)處理css文件的一個延伸罷了贝或，不多說吼过，主要說下postcss。 - 對于
postcss這個怎么用的你應(yīng)該親自實(shí)踐過了咪奖，并且有了一個基本的認(rèn)識盗忱。 - 首先我想說，你可以把
postcss也理解為一個羊赵？趟佃？生態(tài)平臺吧，就像是webpack可以有很多的loader來給它賦能昧捷，postcss也有許多插件來給它賦能闲昭。 -
postcss也同樣有許多來給它賦能（官網(wǎng)上就列舉了許多），如上面我們用到的
autoprefixer插件靡挥，另外還有我們一般用postcss-px-to-viewport插件來實(shí)現(xiàn)使用vw實(shí)現(xiàn)移動端適配移動端適配等等汤纸，
