溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

詳解webpack之scss和postcss-loader的配置

發(fā)布時間：2020-09-15 07:34:03 來源：腳本之家 閱讀：540 作者：饑人谷_林 欄目：web開發(fā)

本文介紹了詳解webpack之scss和postcss-loader的配置，分享給大家，具體如下：

開始

npm i sass-loader node-sass postcss-loader autoprefixer

首先配置postcss-loader

在這里postcss是為了來給瀏覽器內(nèi)核添加私有前綴。當前postcss還有其他操作比如px2rem之類的?？梢园裵ostcss想象成babel-core只是一個控制中心，主要的還是它分散出來的插件。

/**** package.json ****/
// 指定你的前綴的兼容版本。
// 目前指定的只添加-webkit-, -ms-
// 你也可以兼容更低或者更高的的瀏覽器來增加或減少內(nèi)核前綴的數(shù)量。
"browserslist": [
  "> 1%",
  "last 2 versions",
  "not ie <= 8"
]
/**** .postcssrc.js ****/
// 增加一個.postcssrc.js來指定postcss所使用的插件。就跟.babelrc類似
module.exports = {
 plugins:{
  "autoprefixer": {}
 }
}
/**** build.js生產(chǎn)環(huán)境 ****/
{
   test: /\.css$/,
   use: ExtractTextWebpackPlugin.extract({
   fallback: 'style-loader',
-    use: 'css-loader'
+    use: ['css-loader', 'postcss-loader', 'sass-loader']
   })
 }
/**** dev.js開發(fā)環(huán)境 ****/
// 其實個人認為在開發(fā)環(huán)境可加可不加
{
   test: /\.css$/,
   use: ['style-loader', 'css-loader', 'postcss-loader']
},

scss的配置

無非就是增加規(guī)則

/**** build.js ****/
{
  test: /\.scss$/,
  use: ExtractTextWebpackPlugin.extract({
   fallback: 'style-loader',
   use: ['css-loader', 'postcss-loader', 'sass-loader']
  })
}
/**** dev.js ****/
{
  test: /\.scss$/,
  use: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader']
}

github

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持億速云。

向AI問一下細節(jié)

免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手