打包c(diǎn)ss文件? ?/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.默認(rèn)配置文件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'

,若不加此項(xiàng)，對于樣式文件中的引入文件直接走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平級處新建一個(gè)postcss.config.js文件

同時(shí) npm install? autoprefixer -D

module exports={

? ? ? plugin:[ require('autoprefixer')]

}