webpack之Postcss与css模块
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
mode: 'development',
entry: './src/app.js',
pugins: [
new HtmlWebpackPlugin().
],
module: {
rules: [
{
test: '/\.css$/',
use:[
'style-loader',
//此配置是开启模块了,也就是每个css文件都是一个模块
{
loader:'css-loader',
options: {
modules: true
}
},
'postcss-loader'
]
}
]
}
}
在这里解释一下:package.json文件夹中
'browserslist': [
'> 1%',//应用在全球浏览器的使用量大于1%
'last 2 versions'//浏览器最新的两个版本
]
npm i postcss-loader -D
npm i autoprefixer -D
npm i postcss-nested -D
在项目的根目录下传创建一个postcss.config.js
module.exports = {
plugins: [
require('autoprefixer'),
require('postcss-nested')
]
}