詳解webpack之scss和postcss-loader的配置
更新時間：2018年01月09日 10:54:28 作者：饑人谷_林
本篇文章主要介紹了詳解webpack之scss和postcss-loader的配置，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
本文介紹了詳解webpack之scss和postcss-loader的配置，分享給大家，具體如下：
開始
npm i sass-loader node-sass postcss-loader autoprefixer
首先配置postcss-loader
在這里postcss是為了來給瀏覽器內(nèi)核添加私有前綴。當(dāng)前postcss還有其他操作比如px2rem之類的。可以把postcss想象成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)境 ****/
// 其實個人認(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']
}
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了微信接入之獲取用戶頭像的方法步驟，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
這篇文章主要介紹了JavaScript中消除閉包的一般方法介紹,本文直接給出了操作示例,需要的朋友可以參考下2015-03-03
javascript基于prototype實現(xiàn)類似OOP繼承的方法
這篇文章主要介紹了javascript基于prototype實現(xiàn)類似OOP繼承的方法,實例分析了JavaScript使用prototype實現(xiàn)面向?qū)ο蟪绦蛟O(shè)計的中類繼承的相關(guān)技巧,需要的朋友可以參考下2015-12-12
BootstrapValidator不觸發(fā)校驗的實現(xiàn)代碼
BootstrapValidator是基于bootstrap3的jquery表單驗證插件，是最適合bootstrap框架的表單驗證插件，本文給大家介紹BootstrapValidator不觸發(fā)校驗的實現(xiàn)代碼，感興趣的朋友一起看看吧2016-09-09
這篇文章主要介紹了js?select支持手動輸入實現(xiàn)代碼,需要的朋友可以參考下2023-05-05
解決JavaScript頁面刷新與彈出窗口問題2010-03-03
javascript實現(xiàn)動態(tài)表頭及表列的展現(xiàn)方法
這篇文章主要介紹了javascript實現(xiàn)動態(tài)表頭及表列的展現(xiàn)方法,涉及javascript動態(tài)操作table元素的實現(xiàn)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-07-07
解決layui table表單提示數(shù)據(jù)接口請求異常的問題
今天小編就為大家分享一篇解決layui table表單提示數(shù)據(jù)接口請求異常的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
javascript dom 操作詳解 js加強操作實現(xiàn)代碼。2009-07-07
隨著做項目數(shù)量的越來越越多，其中用到j(luò)s的地方很多相同，這里自己整理了一些常用表單驗證的js方法，雖然和其他js驗證框架有一定的差距，但是畢竟是自己總結(jié)的一些東西，在此與紀(jì)錄分享一下。2016-06-06