3-4 使用loader打包静态资源（样式篇下）

love丁酥酥

发布于 2019-07-01 18:14:05

7930

发布于 2019-07-01 18:14:05

文章被收录于专栏：coding for love

1. 简介

上一节我们学习了，webpack如何打包样式文件以及如何自动添加前缀。本节我们继续学习如何打包@import引入的样式文件，css模块化以及如何打包字体文件。

2. 在css文件引入另一个css文件

前面讲了js太大不利于维护，同样css也有这个问题。所以我们将不同的样式内容放到不同的css文件，通过@import引入。如下：

// index.scss
@import "./content.scss";
body {
  margin-left: 50px;
}

// content.scss
body {
  .avatar {
    width: 150px;
    height: 150px;
    transform: translate(180px, 180px);
  }
}

运行打包命令：

image.png

发现前缀没有生效。调换postcss-loader和sass-loader顺序，如下：

            {
                test: /\.scss$/,
                use: [
                    'style-loader',
                    'css-loader',
                    'postcss-loader',
                    'sass-loader',
                ]
            }

再次打包，成功。

image.png

其实，原课程是如下设置：

            {
                test: /\.scss$/,
                use: [
                    'style-loader',
                    {
                        loader: 'css-loader',
                        options: {
                            importLoaders: 2
                        }
                    },
                    'sass-loader',
                    'postcss-loader'
                ]
            }

但事实上我们并不需要再为css-loader显示指定需要使用的loaders，而且postss-loader应该放在sass-loader之前，才会对@import导入的css文件生效。

3. css模块化

现在我们将cotent内容copy一份为content2，然后我们将index.scss中@import content.scss的方法修改为在content引入content.scss。

// content.js
import timg from './img/timg.jpeg';
import './content.scss';
export default function Content() {
    var dom = document.getElementById('root');
    var content = document.createElement('img');
    content.src = timg;
    content.className = 'avatar';
    dom.appendChild(content);
}

// content2.js
import timg from './img/timg.jpeg';
export default function Content() {
    var dom = document.getElementById('root');
    var content = document.createElement('img');
    content.src = timg;
    content.className = 'avatar';
    dom.appendChild(content);
}

/* index.scss */
body {
  margin: 50px;
}

运行后如下：

image.png

我们发现，虽然没有在content2引入content.scss,但是其对于content2也是生效的，这很容易造成全局污染。那么如何避免呢？我们可以使用css的模块化。

            {
                test: /\.scss$/,
                use: [
                    'style-loader',
                    // 'css-loader',
                    {
                        loader: 'css-loader',
                        options: {
                            modules: true,
                        }
                    },
                    'postcss-loader',
                    'sass-loader',
                ]
            }

// content.js
import timg from './img/timg.jpeg';
import style from './content.scss';
export default function Content() {
    var dom = document.getElementById('root');
    var content = document.createElement('img');
    content.src = timg;
    content.className = style.avatar;
    dom.appendChild(content);
}

如图，content.scss只作用于content了。 [图片上传中...(image.png-bdf3df-1560960053075-0)] 我们可以看出，样式名其实已经被改写，以此实现区分。

3. 引入字体文件

我们改写一下content2.js，显示一段文字，布丁。

// content2.js
export default function Content() {
    var dom = document.getElementById('root');
    var content = document.createElement('div');
    content.innerText = '布丁';
    dom.appendChild(content);
}

image.png

我们觉得这段文字太普通，无法引起用户重视，想用特殊的字体来表示，但是又不想引入额外的图片。这个时候就可以考虑iconfont了。关于iconfont的使用，我这里简短讲一下。进入iconfont图标库，搜索关键词布丁：

image.png

挑选一个加入购物车，添加至我的项目，然后下载该项目：

image.png

下载以后解压如下：

image.png

那么该如何使用呢？我们将demo_index.html拖到chrome，如下：

image.png

可以看到刚才的图标已经能在html展示了，并且网页上还给出了详细的使用方法。将字体文件拷贝到项目目录font下，再讲iconfont.css拷贝到项目下的iconfont.scss如图：

image.png

改一下iconfont.scss的资源引用路径，

@font-face {font-family: "iconfont";
  src: url('./font/iconfont.eot?t=1560996411733'); /* IE9 */
  src: url('./font/iconfont.eot?t=1560996411733#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAASYAAsAAAAACVQAAARKAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCCcAqGYIVCATYCJAMICwYABCAFhG0HMBvoB8gOJYmIwADgCkFABPFzvbPJO0ruA1OB0aOqsChU62RdjWFhCITL37dpj7bQFK/5r7itOcmK0RQSJ/FVJbd1lbnv0eR/jpkuSpvzA80poyhpb4DjAQ0oovGiBAPkwPwe4BkuTOB5AoVJhbAzvQaMAI1EmBaIpyaDCBqXXoohhqaqHrI2QbwBXDNbHHQPr/Xfj192hQZkajkIFTeedPVA61dOnJDP+v/S2Hw2zCrPitsmcqwDibgTar8m2JSu6/IizB5iNr46Cb5yVaXyW/uPRxB1EORtxI7zx0kgC0dVnvH3E4ZALADErVy5DBU8H8IxIoymSeNJw6jcRCxCZALLo2HZMpJmWHUFhs1eSXGB5QAvlwm8uicGW7mXCg/sjs3aNSUc4y0paTDuJXKC0KcVWEROQHKIca9r58az+uPnZ52r1K3adeLA1r3H949QY068ePnpw4f3B7Zp1ahtm/ZfP7v1QPaKEUxlCZKOpldUH2QEWjUFTeMVzf3wkYtc3A9jRUrQrcRmp9DC7PR0Gm2K0gmiRt0hENRtIv0O8sSZmBXYCl3iypWx3PLl0WnrYVbUslvawHbsS+08GatlRyw/TgV2As/Ho7cSZJVcsSJ2a8nV+yuXL18W9ezOsn9V5wgDnoIbiDPjL+B+IoXw45Ct5Xw0tCdlIS7Y/x85EhxHF6QTfqJ2dKLMUVQUriMKLacOP2NY+3CHElYeHENB+wgNJX4pDW9T99RqaxOO8O9O3+ez2hvX0szklYwmTyE3j8xvDx/Qlj8gPL+NH4DPSNwY8XP8lrP5Z4/cnS9qlqA6pOXyBlSBWn1EBeHD0dOLZwKkZ5qMKM9u4xoZ6NhFQv15z03VFtdmbrN5YzpjGC6rMuvzMy6j/vWhDFZNsMQpcdb82JN9hEyh9ubGzQPw0MnYR1+z06Gkpn8EvnBI95CF+MgMJsydfmxdVWzs4IhNd46FDugKHeQmEyJSSov90oycb/Oza08fLEg0xxybo28nJ65MMk8cw8bZC6AVoHqZv85fnU5/4/25XT8mcI1fNWUIwJcyqkH3Vi8TpHOC5kp3BCePIGVL+ooEQ5begtB0FlkQu1OqCgUq7O71Ia9zANjW0LyL9pezYYIg1zSPTNh1qCntgbqm41BY03tzqY9LsEhhwKr5AKHbQch0ege5bveRCfseagZ9gbruCIbCvYjcs7QYJrLDJYkeqQd1T0YmvWKXJZOHNEqHSQavVXQ5RTpdK7ncphAqKy71pnpLdslVxgK3z1Du8chIdik21Asuk6xWBTlcilnSe4qNHo+jvqREDnuhYr1iA9JpLhKRh6QH0m0yxERPYSernT1I388PIzHwshK5Ypp+OLUkLm6m3pEyxUpTIHvL7amatmWwm49BOQ8PmSfJXBQ2SC+0SqxiXIE4wkeZSfQ8ihlzRB3qlVA7Oa28uH6lbel2QUHQZCEOC4b6A2+PyW4AAAAA') format('woff2'),
  url('./font/iconfont.woff?t=1560996411733') format('woff'),
  url('./font/iconfont.ttf?t=1560996411733') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
  url('./font/iconfont.svg?t=1560996411733#iconfont') format('svg'); /* iOS 4.1- */
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-buding:before {
  content: "\e60f";
}

然后在index.scss引入iconfont.scss。

/* index.scss */
@import "./iconfont.scss";
body {
  margin: 50px;
}

最后，在相应dom元素加入类名。

// content2.js
export default function Content() {
    var dom = document.getElementById('root');
    var content = document.createElement('div');
    content.innerText = '布丁';
    content.classList.add('iconfont', 'icon-buding');
    dom.appendChild(content);
}

我们运行打包命令，报错如下：

image.png

原来是没有指定合适的loader处理我们新加入的字体文件。如下处理：

            {
                test: /\.(eot|svg|ttf|woff)$/,
                use: 'file-loader'
            }

再次打包，发现虽然成功了，但是并没有图标出现。如图：

image.png

原因是我们之前开启了css模块化，导致@import引入的css样式，类名被修改了。这里，两种方法，一是，取消模块化配置。二是，我们在content2.jss模块化引入字体样式文件即可。如下：

// content2.js
import style from './iconfont.scss';
export default function Content() {
    var dom = document.getElementById('root');
    var content = document.createElement('div');
    content.innerText = '布丁';
    content.classList.add(style.iconfont, style['icon-buding']);
    dom.appendChild(content);
}

index.scss里面就不需要引入iconfont.scss了。运行如下：