欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間：2018年01月09日 10:54:28   作者：饑人谷_林  
本篇文章主要介紹了詳解webpack之scss和postcss-loader的配置，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

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

開(kāi)始

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

首先配置postcss-loader

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

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

scss的配置

無(wú)非就是增加規(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

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論