打包css文件 /sass / less以及
自动添加css样式厂商前缀
1.npm install style-loader css-loader -D
npm installsass-loader node-sass webpack --save-dev
npm install less-loader --save-dev
npm i -D postcss-loader
2.默认配置文件webpack.config.js
const path=reuqire('path');
module.exports={
entry:'./src/index.js',//入口文件
output:{
filename:'bundle.js',//出口打包文件名
path:path.resolve(__dirname,'dist')//打包到的目录
},
module:{
rules:[
{
test:/\.css$/,
use:
['style-loader','css-loader ,' postcss-loader']
},
{
test:/\.scss$/,
use:
['style-loader',
{ loader:'css-loader',
options:{
importLoaders:2//对于css样式文件中还引入样式文件采用的方式还是从下往上 'postcss-loader','sass-loader','css-loader','style-loader'
,若不加此项,对于样式文件中的引入文件直接走css-loader,style-loader忽略掉'postcss-loader'和'sass-loader ' }
},
'sass-loader' ,
'postcss-loader']
},
{
test:/\.less$/,
use:[ 'style-loader', {loader:css-loader' ,
options:{
importLoaders:2
}
}, 'less-loader',
'postcss-loader'
]
}
}
3.在和webpack.config.js平级处新建一个postcss.config.js文件
同时 npm install autoprefixer -D
module exports={
plugin:[ require('autoprefixer')]
}
网友评论