第三章 这里使用autoprefixer 为什么我这页面不显示厂商前缀啊

Question

// 这里是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’;

Answer 1

慕粉0016204997 2019-06-09 10:44:50

在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"

            ]

        })

    ]

};

Answer 2

狗子开始自闭 2019-06-15 17:37:27

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

Answer 3

huangmin 2019-03-13 10:56:40

module.exports = {

    // plugin: [

    //     // require('autoprefixer')

    //     "autoprefixer": {}

    // ]

    plugins: {

        "autoprefixer": {}

    }

}

Answer 4

Dell 2019-03-03 21:33:41

‘postcss-loader’往上提，放在css-loader后面

• 慕标2586880 #1

  大哥，能给个靠谱的答案吗？可能我人笨，买了你课程，在这里我已经磕了一天了，浪费我300块钱

• 慕标2586880 #2

  最关键的是浪费时间