webpack.config.js中的css样式、sass、打包抽离,浏览器加前缀(兼容),图片文件处理,ES6处理
1.安装css和style插件
yarn add style-loader css-loader
index.css
body{
background:skyblue;
}
将样式引入js文件
//引入样式
require('./index.css')
console.log(2+2)
在webpack.config.js中配置文件
module.exports内添加:
module: {
rules: [
{
test: /\.css$/i, //匹配找到任何以css为后缀的文件(匹配)
use: ['style-loader', 'css-loader'], //从后往前的顺序,先将css解析,而后再将其放入style标签里去(use:用xxx)
},
],
},
2.安装解析sass插件
yarn add sass-loader node-sass
index.scss:
$bg-color:greenyellow;
body{
background:$bg-color;
}