从零开始webpack4.x(四)样式loader
2021-04-07 17:25
标签:config syn proposal rop 字符串 row 从右到左 sse ini 依赖:style-loader css-loader 如果有less sass下载对应依赖 如果希望抽离css,自动添加浏览器前缀 -webkit-等 @babel/plugin-proposal-decorators @babel/plugin-syntax-class-properties @babel/plugin-transform-runtime 使用postcss-loader 需要添加 postcss.config.js 然后在package.json中"devDependencies"下添加 从零开始webpack4.x(四)样式loader 标签:config syn proposal rop 字符串 row 从右到左 sse ini 原文地址:https://www.cnblogs.com/aisiqi-love/p/12483902.html样式loader
module: { // 模块
rules: [ // 规则 css-loader 解析@import 这种语法
// style-loader 把css 插入到head标签中
// loader的特点 希望单一
// loader用法 字符串只用一个loader
// 多个loader用 []
// loader执行顺序是 默认从右到左 从下到上
// loader还可以写成对象 可以对一个参数options
{
test: /\.css$/,
use: [
{
loader: ‘style-loader‘,
options: {
insertAt: ‘top‘
}
},
‘css-loader‘,
]
},
{ // sass stylus node-sass sass-loader
test: /\.less$/,
use: [
{
loader: ‘style-loader‘,
options: {
insertAt: ‘top‘
}
},
‘css-loader‘, // 顺序不能变 默认从下到上执行
‘less-loader‘ // 把less -> css
]
}
]
}
依赖:mini-css-extract-plugin postcss-loader autoprefixer @babel/plugin-proposal-class-properties plugins: [
new MiniCssExtractPlugin({
filename: ‘main.css‘ // 生成等css文件名
})
],
module: {
rules: [
{ use: [
MiniCssExtractPlugin.loader,
‘css-loader‘, ‘postcss-loader‘
]
}
]
}module.exports = {
plugins: [
require(‘autoprefixer‘) // 添加浏览器前缀
] }
"browserslist": [
"defaults",
"not ie ",
"last 2 versions",
"> 1%",
"iOS >= 7",
"Android >= 4.0"
]
上一篇:文件的上传与下载(三)
下一篇:HTML_from