第三章 这里使用autoprefixer 为什么我这页面不显示厂商前缀啊
来源：3-3 使用 Loader 打包静态资源（样式篇 - 上）
丛从绿草
2019-03-03
// 这里是webpack.config.js 文件
const path = require(‘path’);
module.exports = {
mode: ‘development’, // production: 压缩代码；development： 不压缩
entry: {
main: ‘./src/index.js’
},
module: {
// 规则
rules: [{
test: /.(jpg|png|gif)KaTeX parse error: Expected 'EOF', got '打' at position 13: /, // loader打̲包文件的方案
use: …/, // loader打包文件的方案
use: [
‘style-loader’, // 从下到上，从右到左的执行顺序。
‘css-loader’,
‘sass-loader’,
‘postcss-loader’
]
}]
},
output: {
filename: ‘bundle.js’,
path: path.resolve(__dirname, ‘dist’)
}
}
// 这是postcss.config.js文件
module.exports = {
plugins: [
require(‘autoprefixer’)
]
}
// packpage.json 文件
{
“name”: “2-1”,
“version”: “1.0.0”,
“description”: “”,
“private”: true,
“main”: “index.js”,
“scripts”: {
“bundle”: “webpack”
},
“author”: “Wang”,
“license”: “ISC”,
“devDependencies”: {
“autoprefixer”: “^9.4.9”,
“css-loader”: “^2.1.0”,
“file-loader”: “^3.0.1”,
“node-sass”: “^4.11.0”,
“postcss-loader”: “^3.0.0”,
“sass-loader”: “^7.1.0”,
“style-loader”: “^0.23.1”,
“url-loader”: “^1.1.2”,
“webpack”: “^4.29.6”,
“webpack-cli”: “^3.2.3”
}
}
// index.js文件
import avatar from ‘./avatar.jpg’;
import ‘./index.scss’;
var img = new Image();
img.src = avatar;
img.classList.add(‘avatar’);
var root = document.getElementById(‘root’);
root.append(img);
console.log(avatar);
// avatar.scss
body {
.avatar {
width: 150px;
height: 150px;
transform: translate(100px, 100px);
}
}
// index.scss 文件
@import ‘./avatar.scss’;
4回答
-
慕粉0016204997
2019-06-09
在postcss.config.js文件中，设置支持哪些浏览器，必须设置支持的浏览器才会自动添加添加浏览器兼容，我是4.33.0.版本，增加了下面的配置可以出现 谷歌浏览器的前缀
module.exports = {
plugins: [
require('autoprefixer')({
"browsers": [
"defaults",
"not ie < 11",
"last 2 versions",
"> 1%",
"iOS 7",
"last 3 iOS versions"
]
})
]
};
30 -
狗子开始自闭
2019-06-15
browsers的做法现在在你打包的时候会抛出警告 不建议再使用了，而是在package.json文件的添加
browserslist字段或者新建一个.browserslistrc文件
在package.json文件这样写"dependencies": {
"webpack": "^4.25.1"
},
"browserslist": [
"defaults",
"not ie < 11",
"last 2 versions",
"> 1%",
"iOS 7",
"last 3 iOS versions"
]
在.browserslistrc文件中defaults,
not ie < 11,
last 2 versions,
> 1%,
iOS 7,
last 3 iOS versions
具体你的可以查github，https://github.com/browserslist/browserslist#readme
20 -
huangmin
2019-03-13
module.exports = {
// plugin: [
// // require('autoprefixer')
// "autoprefixer": {}
// ]
plugins: {
"autoprefixer": {}
}
}
00 -
Dell
2019-03-03
‘postcss-loader’往上提，放在css-loader后面
022019-10-06
相似问题