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

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

1. 简介

在制作网页时,我们必不可少地会使用css。那么webpack是如何打包css文件的呢?

2. 直接引入css

现在我们想指定图片的宽高都是150px,首先我们指定图片的类名:

// content.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.css。内容如下:

.avatar {
    width: 150px;
    height: 150px;
}

引入css文件:

// index.js
import Header from './header';
import Sidebar from './sidebar';
import Content from './content';
import './index.css';

new Header();
new Sidebar();
new Content();

运行结果如下:

image.png

提示很明显:

You may need an appropriate loader to handle this file type

3. 引入css-loader和style-loader

处理css文件,需要使用css-loader。先安装css-loader。然后配置如下:

    module: {
        rules: [
            {
                test: /\.(jpg|jpeg|png|gif)$/,
                use: {
                    loader: 'url-loader',
                    options: {
                        name: '[name].[ext]',
                        limit: 2048
                    }
                }
            },
            {
                test: /\.css$/,
                use: [ 'css-loader' ]
            }
        ]
    }

运行打包命令,我们发现打包成功了,但图片大小却没有变化。

image.png

image.png

审查元素发现index.css文件并没有被使用。因为css-loader只负责解释@import 和 url() ,会 import/require() 后再解析(resolve)它们。而要将解析后的css文件注入dom,我们还需要使用style-loader。 安装后配置如下:

    module: {
        rules: [
            {
                test: /\.(jpg|jpeg|png|gif)$/,
                use: {
                    loader: 'url-loader',
                    options: {
                        name: '[name].[ext]',
                        limit: 2048
                    }
                }
            },
            {
                test: /\.css$/,
                use: [ 'style-loader', 'css-loader' ]
            }
        ]
    }

结果ok。

image.png

需要注意的是,这里style-loader和css-loader顺序不能弄错,因为use后面的loader是从后往前执行的,需要先解释css,再注入。

3. css预处理器

相信大家都有接触过css预处理器,比如sass和less,那么如何打包这种类型的css文件呢。 首先新建一个sass文件,如下:

body {
  .avatar {
    width: 150px;
    height: 150px;
  }
}

然后将对index.css的引用换成是index.scss。运行打包命令后报错:

image.png

参考官网,打包sass我们需要sass-loader和node-sass。 通过将 style-loadercss-loader 与 sass-loader 链式调用,可以立刻将样式作用在 DOM 元素。

    module: {
        rules: [
            {
                test: /\.(jpg|jpeg|png|gif)$/,
                use: {
                    loader: 'url-loader',
                    options: {
                        name: '[name].[ext]',
                        limit: 2048
                    }
                }
            },
            {
                test: /\.css$/,
                use: [ 'style-loader', 'css-loader' ]
            },
            {
                test: /\.scss$/,
                use: [ 'style-loader', 'css-loader', 'sass-loader' ]
            }
        ]
    }

正常展示如下:

image.png

4. 添加前缀

在添加css3的属性时,我们一般会对其添加不同的厂商前缀,保证兼容性。自己去手动添加会很麻烦,我们可以利用postcss-loader和autoprefixer插件来智能添加前缀。 首先安装它们,然后添加配置文件postcss.config.js:

module.exports = {
    plugins: [
        require('autoprefixer')
    ]
};

修改 webpack.config.js

    module: {
        rules: [
            {
                test: /\.(jpg|jpeg|png|gif)$/,
                use: {
                    loader: 'url-loader',
                    options: {
                        name: '[name].[ext]',
                        limit: 2048
                    }
                }
            },
            {
                test: /\.css$/,
                use: [ 'style-loader', 'css-loader' ]
            },
            {
                test: /\.scss$/,
                use: [ 'style-loader', 'css-loader', 'sass-loader', 'postcss-loader' ]
            }
        ]
    }

以及index.scss

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

运行后发现并没有添加前缀。

image.png

查阅文档,我们发现还需要指定其支持的浏览器版本。如下:

module.exports = {
    plugins: [
        require('autoprefixer')({
            browsers : ['last 10 versions']
        })
    ]
};

再次运行,如下:

image.png

参考

https://www.webpackjs.com/loaders/css-loader/ https://www.webpackjs.com/loaders/style-loader/ https://www.webpackjs.com/loaders/sass-loader/

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 6-1~2 如何编写一个 loader

    loader 让 webpack 能够去处理那些非 JavaScript 文件(webpack 自身只理解 JavaScript)。loader 可以将所有类型...

    love丁酥酥
  • 4-9 css 文件的代码分割

    本节主要是介绍 MiniCssExtractPlugin 插件,该插件用于将 css 提取成单独的文件。

    love丁酥酥
  • 第 5 章 系统建模

    理解一个系统模型并不是系统的一个完备表示,这点很重要。系统模型有意抹去一些细节以使模型更容易理解。模型研究的是系统的一种抽象而不是系统的另一种表示。

    love丁酥酥
  • (12/24) css进阶:sass文件的打包和分离

    这里需要 在项目目录下用npm安装两个包。node-sass和sass-loader,(也可以使用cnpm安装)

    wfaceboss
  • 5、webpack从0到1-处理css文件

    Ewall
  • vue踩坑-Error: Can't resolve 'sass-loader' in 'E:\Element-UI-master\src\components'

    好了 完美解决Error: Can't resolve 'sass-loader' in 'E:\Element-UI-master\src\componen...

    祈澈菇凉
  • 一组珍贵老照片,看看那些顶级公司创业初期的屌丝样!

    这些老照片记录了“联想”、“腾讯”、“华为”……这些今天为人们所熟知的企业巨头最初的办公场所。也许现在你正如昨日的他们一样,在创业路上披荆斩棘,但看着他们今日的...

    曾响铃
  • 【第9期】webpack入门学习手记(三)

    距离上一次更新这个系列,过去了两天。最近实在是有点忙,没有挤出时间整理。感觉日更还真是困难?

    siberiawolf
  • “中国诺贝尔”再颁奖,百万美元捐赠者是一群被企业耽搁的科学家

    李根 发自 中国大饭店 量子位 报道 | 公众号 QbitAI 9月9日,未来科学大奖颁出了第二届的奖项。清华大学教授施一公、中科大教授潘建伟,以及北大教授许...

    量子位
  • 2019-02-20 在PyPI测试平台

    参考Packaging Python Projects, 源码在nobodxbodon/test-package-for-pypi

    py3study

扫码关注云+社区

领取腾讯云代金券