安装css-loader和style-loader
yarn add css-loader style-loader -D
使用：
在webpack.config.js插入以下内容
module: {
// 模块
rules: [
// 规则 css-loader
// css-loader是为了使用import这种语法
// style-loader 是把css插入到head标签中
// loader加载默认是从右向左
{
test: /\.css$/, //use:['style-loader','css-loader']
use: [
{
loader: "style-loader",
options: {
insert: "top"
}
},
"css-loader"
]
}
要是使用less的话就插入以下内容
// 处理less文件，匹配规则
{
test: /\.less$/, //use:['style-loader','css-loader']
use: [
{
loader: "style-loader",
// options: {
// insert: 'top'
// }
},
"css-loader",//@import语法，解析路径
"less-loader" //把less-->css
]
}
css文件抽离压缩处理
抽离css的插件
yarn add mini-css-extract-plugin -D
使用
let MiniCssExtractPulugin = require('mini-css-extract-plugin')
样式添加浏览器前缀,解决办法：
yarn add postcss-loader autoprefixer -D
module.exports={
plugins:[require('autoprefixer')]
}
