hooyantsing's Blog

P13 css兼容性处理

字数统计: 1.3k阅读时长: 7 min
2020/11/29

尚硅谷2020最新版Webpack5实战教程

#### 步骤

下载包:

1
npm i postcss-loader postcss-preset-env -D

编写配置文件:

webpack.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const { resolve } = require('path');

// 设置node.js环境变量
process.env.NODE_ENV = 'development';

module.exports = {
entry: './src/js/index.js',
output: {
filename: 'js/built.js',
path: resolve(__dirname, 'build')
},
module: {
rules: [
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
/*
css兼容性处理:postcss --> postcss-loader postcss-preset-env

帮postcss找到package.json中的browserslist里面的配置,通过配置加载指定的css兼容性样式

package.json 加入以下配置
"browserslist" : {
// 开发环境配置
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
],
// 生产环境配置(默认)
"production": [
">0.2%",
"not dead",
"not op_mini all"
]
}

选择开发环境,需要配置 process.env.NODE_ENV = 'development';
*/

// 使用loader默认配置
// 'postcss-loader'
// 修改loader配置
{
loader: 'postcss-loader',
options: {
ident: 'postcss',
plugins: () => {
// postcss 的插件 postcss-preset-env
require('postcss-preset-env')
}
}
}
]
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
}),
new MiniCssExtractPlugin({
filename: 'css/built.css'
})
],
mode: 'development',

devServer: {
contentBase: resolve(__dirname, 'build'),
compress: true,
port: 3000
}
}

还需要在 package.json 加入browserslist浏览器配置

package.json

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
{
"name": "webpack_code",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"css-loader": "^5.0.1",
"file-loader": "^6.2.0",
"html-loader": "^1.3.2",
"html-webpack-plugin": "^5.0.0-alpha.14",
"less": "^3.12.2",
"less-loader": "^7.1.0",
"mini-css-extract-plugin": "^1.3.1",
"postcss-loader": "^4.1.0",
"postcss-preset-env": "^6.7.0",
"style-loader": "^2.0.0",
"url-loader": "^4.1.1",
"webpack": "^5.9.0",
"webpack-cli": "^4.2.0",
"webpack-dev-server": "^3.11.0"
},
"dependencies": {},


"browserslist" : {
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
],
"production": [
">0.2%",
"not dead",
"not op_mini all"
]
}


}
踩坑

以上配置在新版本里报错。

报错信息:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
PS E:\Project_atguigu_webpack\10.css兼容性处理> webpack
[webpack-cli] Compilation finished
asset js/built.js 7.21 KiB [compared for emit] (name: main)
asset index.html 304 bytes [compared for emit]
runtime modules 931 bytes 4 modules
cacheable modules 126 bytes
./src/js/index.js 48 bytes [built] [code generated]
./src/css/a.css 39 bytes [built] [code generated] [1 error]
./src/css/b.css 39 bytes [built] [code generated] [1 error]

ERROR in ./src/css/a.css
Module build failed (from ../node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ../node_modules/postcss-loader/dist/cjs.js):ValidationError: Invalid options object. PostCSS Loader has been initialized using an options object that does not match the API schema.
- options has an unknown property 'plugins'. These properties are valid:
object { postcssOptions?, execute?, sourceMap? }
at validate (E:\Project_atguigu_webpack\node_modules\schema-utils\dist\validate.js:104:11)
at Object.loader (E:\Project_atguigu_webpack\node_modules\postcss-loader\dist\index.js:43:29)
at processResult (E:\Project_atguigu_webpack\node_modules\webpack\lib\NormalModule.js:583:19)
at E:\Project_atguigu_webpack\node_modules\webpack\lib\NormalModule.js:676:5
at E:\Project_atguigu_webpack\node_modules\loader-runner\lib\LoaderRunner.js:397:11
at E:\Project_atguigu_webpack\node_modules\loader-runner\lib\LoaderRunner.js:252:18
@ ./src/js/index.js 1:0-22

ERROR in ./src/css/b.css
Module build failed (from ../node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ../node_modules/postcss-loader/dist/cjs.js):ValidationError: Invalid options object. PostCSS Loader has been initialized using an options object that does not match the API schema.
- options has an unknown property 'plugins'. These properties are valid:
object { postcssOptions?, execute?, sourceMap? }
at validate (E:\Project_atguigu_webpack\node_modules\schema-utils\dist\validate.js:104:11)
at Object.loader (E:\Project_atguigu_webpack\node_modules\postcss-loader\dist\index.js:43:29)
at processResult (E:\Project_atguigu_webpack\node_modules\webpack\lib\NormalModule.js:583:19)
at E:\Project_atguigu_webpack\node_modules\webpack\lib\NormalModule.js:676:5
at E:\Project_atguigu_webpack\node_modules\loader-runner\lib\LoaderRunner.js:397:11
at E:\Project_atguigu_webpack\node_modules\loader-runner\lib\LoaderRunner.js:252:18
@ ./src/js/index.js 2:0-22

2 ERRORS in child compilations
webpack 5.9.0 compiled with 4 errors in 251 ms

解决方案:

1
2
3
4
5
6
7
8
9
如果按照老师的做法没有成功的,那是用法改变了。你需要在webpack.config.js文件所在目录下创建一个同级的postcss.config.js文件然后写入一下内容
module.exports = {
plugins: [
//使用postcss插件
require('postcss-preset-env')
]
}
最后将webpack文件中的其他配置去掉,改用默认配置
'postcss-loader'

如下配置

编写配置文件:

webpack.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const { resolve } = require('path');

// 设置node.js环境变量
process.env.NODE_ENV = 'development';

module.exports = {
entry: './src/js/index.js',
output: {
filename: 'js/built.js',
path: resolve(__dirname, 'build')
},
module: {
rules: [
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
/*
css兼容性处理:postcss --> postcss-loader postcss-preset-env

帮postcss找到package.json中的browserslist里面的配置,通过配置加载指定的css兼容性样式

package.json 加入以下配置
"browserslist" : {
// 开发环境配置
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
],
// 生产环境配置(默认)
"production": [
">0.2%",
"not dead",
"not op_mini all"
]
}

选择开发环境,需要配置 process.env.NODE_ENV = 'development';
*/

// 使用loader默认配置
'postcss-loader'
]
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
}),
new MiniCssExtractPlugin({
filename: 'css/built.css'
})
],
mode: 'development',

devServer: {
contentBase: resolve(__dirname, 'build'),
compress: true,
port: 3000
}
}

postcss.config.js

1
2
3
4
5
6
module.exports = {
plugins: [
//使用postcss插件
require('postcss-preset-env')
]
}
CATALOG
  1. 1. #### 步骤
    1. 1.1. 踩坑