詳細介紹webpack中scss的相關配置

本篇文章主要介紹了詳解webpack之scss和postcss-loader的配置，現在分享給大家，也給大家做個參考。

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

開始

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

##首先配置postcss-loader

在這裡postcss是為了來為瀏覽器核心添加私有前綴。目前postcss還有其他操作像是px2rem之類的。可以把postcss想像成babel-core只是一個控制中心，主要的還是它分散出來的插件。

/**** package.json ****/
// 指定你的前缀的兼容版本。
// 目前指定的只添加-webkit-, -ms-
// 你也可以兼容更低或者更高的的浏览器来增加或减少内核前缀的数量。
"browserslist": [
  "> 1%",
  "last 2 versions",
  "not ie <= 8"
]
/**** .postcssrc.js ****/
// 增加一个.postcssrc.js来指定postcss所使用的插件。就跟.babelrc类似
module.exports = {
 plugins:{
  "autoprefixer": {}
 }
}
/**** build.js生产环境 ****/
{
   test: /\.css$/,
   use: ExtractTextWebpackPlugin.extract({
   fallback: &#39;style-loader&#39;,
-    use: &#39;css-loader&#39;
+    use: [&#39;css-loader&#39;, &#39;postcss-loader&#39;, &#39;sass-loader&#39;]
   })
 }
/**** dev.js开发环境 ****/
// 其实个人认为在开发环境可加可不加
{
   test: /\.css$/,
   use: [&#39;style-loader&#39;, &#39;css-loader&#39;, &#39;postcss-loader&#39;]
},

scss的設定

無非就是增加規則

/**** 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']
}

###上面是我整理給大家的，希望今後會對大家有幫助。 ######相關文章：#########js實作操作二進位資料方法#############利用vue2.0中swiper元件實作輪播（詳細教學） ############有關在Vue中使用Compass的具體方法？ ############如何關閉Vue運算屬性自帶的快取功能，具體步驟有哪些？ ######

以上是詳細介紹webpack中scss的相關配置的詳細內容。更多資訊請關注PHP中文網其他相關文章！