本文介紹了詳解webpack之scss和postcss-loader的配置，分享給大家，具體如下：
成都創(chuàng)新互聯(lián)公司是一家專業(yè)提供西區(qū)企業(yè)網(wǎng)站建設,專注與做網(wǎng)站、成都網(wǎng)站設計、H5技術、小程序制作等業(yè)務。10年已為西區(qū)眾多企業(yè)、政府機構等服務。創(chuàng)新互聯(lián)專業(yè)網(wǎng)站建設公司優(yōu)惠進行中。
開始
npm i sass-loader node-sass postcss-loader autoprefixer
首先配置postcss-loader
在這里postcss是為了來給瀏覽器內(nèi)核添加私有前綴。當前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)境 ****/
// 其實個人認為在開發(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)容，希望對大家的學習有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。
