专栏首页coding for love3-4 使用loader打包静态资源(样式篇下)

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

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了。运行如下:

image.png

另外,我们发现其实并没有使用路径引入woff2文件,二是base64引入的,这个文件可以删掉。如果是路径引入的,我们就需要加入,并且在webpack.dev.config中加入对这种文件的处理。

4. 作业

https://www.webpackjs.com/guides/asset-management/ https://www.webpackjs.com/loaders/#%E6%A0%B7%E5%BC%8F

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 3-2 使用loader打包静态资源(图片)

    上一节我们成功打包并展示了一张图片。可是我们看到最终输出的图片名称是一串hash值,如果我们希望其展示的是原来的名称呢?可以进行如下配置:

    love丁酥酥
  • CSS常用布局实现05-圣杯布局和双飞翼布局

    其实对于三列布局的实现,之前网上使用最多的还是这两种。它们有一个共同的优点,就是可以使主内容优先加载。当然,如果不考虑兼容,flex和grid还是优先推荐的。

    love丁酥酥
  • 3-1 Loader是什么

    前面说过,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler),我们也看到了webpack对js文件的打包...

    love丁酥酥
  • jenkins实战系列

    本文主要介绍了在linux 下如何部署jenkins.以及通过jenkins 如何发布php.以及java 程序,利用jenkins 来实现邮件告...

    致码DevOps
  • Docker安装Jenkins(详细)

    3.进入/home/var/目录,设置jenkins文件夹归属用户UID为1000

    Java程序员的普遍撒网
  • 【Kubernetes系列】第8篇 CI/CD之组件部署

    应对敏捷开发的需求,对CI(持续集成))/CD(持续交付)的提出了更高的标准,今天来讨论下,如何基于开源组件(gitlab/jenkins/harbor/kub...

    HankerCloud
  • 使用反向代理加速 Jenkins 插件下载

    训练营进行到 DevOps 部分了,上节课讲解 Jenkins 动态 Slave 的时候翻车了,我们知道 Jenkins 安装的时候会让我们选择安装一些推荐的插...

    我是阳明
  • 修改jenkins启动的默认用户

    # 背景 通过yum命令安装的jenkins,通过service jenkins去启动jenkins的话,默认的用户是jenkins,但jenkins这个用户是...

    千往
  • CentOS6.X/RedHat6.X yum安装jenkins

    配置jenkins源 sudo wget -O /etc/yum.repos.d/jenkins.repo https://pkg.jenkins.io/red...

    shaonbean
  • 跟我一起学docker(十)--jenkins的使用

    IT故事会

扫码关注云+社区

领取腾讯云代金券