詳解webpack之scss和postcss-loader的配置
更新時(shí)間：2018年01月09日 10:54:28 作者：饑人谷_林
本篇文章主要介紹了詳解webpack之scss和postcss-loader的配置，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
本文介紹了詳解webpack之scss和postcss-loader的配置，分享給大家，具體如下：
開始
npm i sass-loader node-sass postcss-loader autoprefixer
首先配置postcss-loader
在這里postcss是為了來給瀏覽器內(nèi)核添加私有前綴。當(dāng)前postcss還有其他操作比如px2rem之類的?？梢园裵ostcss想象成babel-core只是一個(gè)控制中心，主要的還是它分散出來的插件。
/**** package.json ****/
// 指定你的前綴的兼容版本。
// 目前指定的只添加-webkit-, -ms-
// 你也可以兼容更低或者更高的的瀏覽器來增加或減少內(nèi)核前綴的數(shù)量。
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
/**** .postcssrc.js ****/
// 增加一個(gè).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)境 ****/
// 其實(shí)個(gè)人認(rè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']
}
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
后臺(tái)獲取ZTREE選中節(jié)點(diǎn)的方法
這篇文章主要介紹了后臺(tái)獲取ZTREE選中節(jié)點(diǎn)的方法,實(shí)例分析了ZTREE中g(shù)etZTreeObj方法與getCheckedNodes方法的使用技巧,需要的朋友可以參考下2015-02-02
JavaScript 可用來在數(shù)據(jù)被送往服務(wù)器前對(duì) HTML 表單中的這些輸入數(shù)據(jù)進(jìn)行驗(yàn)證。通過本文給大家介紹Javascript的表單驗(yàn)證長(zhǎng)度，需要的朋友參考下吧2016-03-03
這篇文章主要介紹了js+HTML5實(shí)現(xiàn)視頻截圖的方法,涉及javascript操作html5元素實(shí)現(xiàn)多媒體文件截圖的相關(guān)技巧,需要的朋友可以參考下2015-06-06
使用js獲取文件的后綴，有個(gè)不錯(cuò)的正則，大家可以借用下，具體如下，感興趣的朋友可以參考下哈，希望對(duì)大家有所幫助2013-07-07
javascript:void(0) 在某些情況下會(huì)有瀏覽器不兼容的bug。下面我們先來看下javascript:void(0) 的基礎(chǔ)介紹及用法，然后再來看使用它會(huì)出現(xiàn)什么問題，該怎么解決，感興趣的朋友跟隨小編一起看看吧2023-10-10
alert對(duì)話框的使用給用戶帶來了很多的方便，而有些時(shí)候不希望讓它存在，接下來介紹如何使用js攔截alert對(duì)話框,感興趣的朋友可以了解下2013-01-01
JavaScript的Set數(shù)據(jù)結(jié)構(gòu)詳解
這篇文章主要為大家介紹了JavaScript的Set數(shù)據(jù)結(jié)構(gòu)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-01-01
js 設(shè)置選中行的樣式的實(shí)現(xiàn)代碼
設(shè)置選中的行樣式的js代碼，需要的朋友可以參考下，這里只給出了函數(shù)，具體的自己發(fā)揮。2010-05-05
JS利用Canvas實(shí)現(xiàn)文字水印和圖片水印合成
這篇文章主要為大家詳細(xì)介紹了JavaScript如何利用Canvas實(shí)現(xiàn)文字水印和圖片水印合成的效果，文中的示例代碼講解詳細(xì)，需要的小伙伴可以參考一下2022-11-11
頁面自定義拖拽布局...2007-02-02