摘要
本文主要讲述了：
- 作用
- 配置
- 示例
正文
作用
将引入的 CSS 文件解析为 JavaScript 模块，以便于webpack打包。
注意：
- 相对于当前文件的路径不需要以
.开头
- 如果 CSS 中引入了图片、字体等文件，需要另行配置相应的 loader
配置
url
是否解析 CSS 中的url()。
默认值为true。
注意：绝对路径不会被解析
示例：相对路径
1
2
3
4
5
| url(image.png) -> require('./image.png')
url('image.png') -> require('./image.png')
url(./image.png) -> require('./image.png')
url('./image.png') -> require('./image.png')
image-set(url('image2x.png') 1x, url('image1x.png') 2x) -> require('./image1x.png') and require('./image2x.png')
|
示例：绝对路径
1
| url('http://dontwritehorriblecode.com/2112.png') -> require('http://dontwritehorriblecode.com/2112.png')
|
如果要使用模块或alias中的 CSS 文件，要添加~前缀。
示例：
1
2
3
| url(~module/image.png) -> require('module/image.png')
url('~module/image.png') -> require('module/image.png')
url(~aliasDirectory/image.png) -> require('otherDirectory/image.png')
|
import
是否解析 CSS 中的@import()语法。
默认值为true。
注意：绝对路径不会被解析。
示例：
1
2
3
4
5
6
| @import 'style.css' -> require('./style.css')
@import url(style.css) -> require('./style.css')
@import url('style.css') -> require('./style.css')
@import './style.css' -> require('./style.css')
@import url(./style.css) -> require('./style.css')
@import url('./style.css') -> require('./style.css')
|
示例：
1
2
| /* 绝对路径 */
@import url('http://dontwritehorriblecode.com/style.css') -> @import url('http://dontwritehorriblecode.com/style.css')
|
如果要使用模块或alias中的 CSS 文件，要添加~前缀。
示例：
1
2
3
| @import url(~module/style.css) -> require('module/style.css')
@import url('~module/style.css') -> require('module/style.css')
@import url(~aliasDirectory/style.css) -> require('otherDirectory/style.css')
|
importLoaders
在css-loader之前有几个 loader。
注意：webpack的 loader 加载顺序是逆序。
默认值为0。
示例：
learn_webpack/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
| module.exports = {
module: {
rules: [
{
test: /\.s[ac]ss$/,
use: [
{
loader: 'style-loader',
},
{
loader: 'css-loader',
options: {
importLoaders: 2,
},
},
{
loader: 'postcss-loader',
},
{
loader: 'sass-loader',
},
],
},
],
},
};
|
loader 的加载顺序为：
sass-loaderpostcss-loadercss-loaderstyle-loader
因为 css-loader 之前还有 2 个 loader，所以 css-loader 的importLoaders为2。
为什么需要配置 importLoaders
示例：
learn_webpack/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
| const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
mode: 'development',
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
},
module: {
rules: [
{
test: /\.s[ac]ss$/,
use: [
{
loader: 'style-loader',
},
{
loader: 'css-loader',
options: {
importLoaders: 2,
},
},
{
loader: 'postcss-loader',
},
{
loader: 'sass-loader',
},
],
},
],
},
plugins: [
new HtmlWebpackPlugin({
title: 'learn_webpack',
template: 'public/index.html',
}),
],
};
|
learn_webpack/src/index.js
1
| import './css/foo.scss';
|
learn_webpack/src/scss/foo.scss
1
2
3
4
5
6
7
8
9
| :root {
--mainColor: #12345678;
}
body {
.foo {
color: var(--mainColor);
}
}
@import '../css/bar.css';
|
learn_webpack/src/css/bar.css
1
2
3
4
5
6
| :root {
--bgColor: #23456789;
}
body .bar {
background-color: var(--bgColor);
}
|
使用sass-loader处理foo.scss，获得foo.css。
1
2
3
4
5
6
7
8
| @import '../css/bar.css';
:root {
--mainColor: #12345678;
}
body .foo {
color: var(--mainColor);
}
|
注意：
- 因为 CSS 规范要求
@import必须置于除@charset之外的其他任何代码之前，所以@import 'bar.css'被提升到了文件顶部。
- 由于
foo.scss中@import引入的是一个.css文件，所以sass-loader不对它进行任何处理，原样输出。
继续使用postcss-loader处理foo.css，获得：
1
2
3
4
5
6
7
8
9
| @import '../css/bar.css';
:root {
--mainColor: rgba(18, 52, 86, 0.47059);
}
body .foo {
color: rgba(18, 52, 86, 0.47059);
color: var(--mainColor);
}
|
注意：由于postcss-loader同样未对@import进行任何处理，因此bar.css中的语法未进行 PostCSS 编译。
继续使用css-loader处理foo.css。
综上所述，importLoaders的作用是：告诉css-loader，如果css-loader获得的 CSS 文件中还存在@import，调用它前面的 loader 继续处理它。
示例
learn_webpack/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
| const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
mode: 'development',
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
},
module: {
rules: [
{
test: /\.css$/,
loader: 'css-loader',
},
{
test: /\.(png|jpe?g|gif)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 3072,
},
},
],
},
],
},
plugins: [
new HtmlWebpackPlugin({
title: 'learn_webpack',
template: 'public/index.html',
}),
],
};
|
learn_webpack/src/index.js
1
2
| import resetCSS from './css/reset.css';
console.log(resetCSS.toString());
|
learn_webpack/src/css/reset.css
1
2
3
4
| body {
margin: 0;
background-image: url('../img/point.png');
}
|
运行：
1
2
3
| #!/usr/bin/env bash
npm webpack
|
相当于
- 将 CSS 文件解析为 JavaScript 模块。
- 调用
url-loader去解析url()中引入的图片文件。
参考资料
本文对你有帮助？请支持我
支付宝
微信