webpack(二)——css-loader,style-loader,less-loader,postcss-loader

2022/4/25 6:14:56

编程Tag： webpack 浏览器 less loader css style PostCSS

本文主要是介绍webpack(二)——css-loader,style-loader,less-loader,postcss-loader，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

1. css-loader

  1. 在js文件夹下新建component.js

    function component() {
    const element = document.createElement("div");
    
    element.innerHTML = ["hello", "webpack"].join(" ");
    element.className = "content";
    
    return element;
}

document.body.appendChild(component())

    在页面上增加了html元素

  2. 给元素增加样式

    在src下创建css文件夹，创建index.css

    我们需要在component.js创建的组件上引入样式，如果直接import会报错，那么我们如何引入呢？

    引入css-loder

    1. loader是什么？

      • loader可以用于对模块的源代码进行转换
      • 我们可以将css文件也看成是一个模块，我们是通过import来加载这个模块的
      • 在加载这个模块时，webpack其实并不知道如何对其进行加载，我们必须制定对应的loader来完成这个功能

    2. 我们需要什么loader来加载？

      • 需要一个可以读取css文件的loader
      • 最常用的就是css-loader

    3. 如何安装css-loader？

      npm install css-loader --save-dev
npm install css-loader -D

    css-loader的使用方案

    1. 内联方式

      在component中引入

      import "css-loader!../css/index.css"

    2. cli方式(现在不支持了)

      在package.json上配置

      "scripts": {
    "build": "webpack --module-bind 'css-loader' --config webpack.config.js"
  }

    3. 配置方式（最常用）

      在webpack.config.js

      // 配置loader的结构
module:{
    rules: [**这里要放rule对象**]
}

      rules中

      • test属性：用于对resource进行匹配，通常会设置成正则表达式
      • use属性：对应的值是一个数组，[UseEntry],
        • UseEntry是一个对象,可以通过对象的属性来设置
          • loader:必须有一个loader属性，对应的值是一个字符串
          • options：可选属性，值是字符串或者对象，值会被传入loader
          • query：目前已经使用options替代
          • {loader:"css-loader" 可以简写成 "css-loader"

      正确的配置：

      module.exports = {
   module:{
    rules: [
        {
             // 规则使用正则表达式
            test: /\.css$/,  // 这里是匹配资源
            use:[{
                loader: "css-loader"
            }]
        }
   ]
}

    没有在页面上出现？因为没有作用到页面上，怎么办？

    分析插入样式的方式：

    • 行内样式，在元素标签内写，没有
    • 页内样式，增加style标签，没有
    • 外部样式，link，没有

    css-loader只是编译了css文件，但是没有插入样式的功能，所以需要引入另一个loader

2. style-loader

  1. 安装

    npm i style-loader -D

  2. 应用

    注意loader的顺序，从后往前执行，需要先执行css-loader，写在后面

    module.exports = {
   module:{
    rules: [
        {
             // 规则使用正则表达式
            test: /\.css$/,  // 这里是匹配资源
            use:[
                "style-loader",
                "css-loader"
            ]
        }
   ]
}

3. 处理less文件

  1. 写一个component.less文件，引入component，浏览器不能识别，要转化为css

  2. 安装less

    npm i less -D

  3. 安装之后发现node_modules的bin下面有个lessc文件

    • lessc帮助我们的less文件转义成css

    • npx less ./src/css/component.less > component.css

    • 转译出的文件在src的css下

  4. 安装less-loader

    npm i less-loader -D

  5. 在webpack.config.js配置

    module.exports = {
   module:{
    rules: [
        {
            test: /\.less$/,  // 这里是匹配资源
            use:[
                "style-loader",
                "css-loader",
                "less-loader"
            ]
        }
   ]
}

4. postcss-loader

4.1 前置知识

浏览器兼容性

  1. 开发中，浏览器的兼容性问题，我们应该如何去解决和处理？
  • 这里的兼容性是针对不同的浏览器支持的特性，比如css特性，js语法，之间的兼容性
    • 有些浏览器不支持某些属性，我们可以加浏览器的前缀->autoprefiexer可以帮忙加前缀
    • 但是我们不一定需要加前缀

4.2 browserlist工具

  1. 认识browserlist工具

我们在很多脚手架配置的时候可以看到这样的配置，在browserlist文件下

> 1%  // 市场占有率大于1%
last 2 version
not dead

  • 市场占有率在哪查? can I use网站

  • 我们需要工具来达到我们配置的兼容性条件，可以用browserlist来共享我们的配置，也就是说如果我们在browserlist中配置了兼容市场占有率>1%的浏览器，其他的配置工具知道了，就会自动配置

    1. browserlist的编写规则

  • defaults：browserlist的默认浏览器配置（>0.5%，last 2 version，Firefox ESR，not dead）

  • 5%：通过全局使用情况统计信息选择的浏览器版本。>=,<和<=工作过

  • 5% in US:美国的使用情况，接受两个字母的国家/地区代码

    • >5% in alt-AS: 亚洲地区使用情况统计信息。有关区域代码的列表：caniuse-lite/data/regions

  • >5% in my stats: 使用自定义用法数据

    • >5% in browserlist-config-mycompany stats:使用来自自定义使用情况数据：browserlist-config-mycompany/broserslist.stats.json

  • cover 99.5%:提供覆盖率的最受欢迎的浏览器

    • cover 99.5% in US:在美国覆盖率最受欢迎的浏览器
    • cover 99.5% in my stats:使用自定义用法数据

  • dead：24个月没有官方支持或者更新的浏览器，例如：IE 10

  • last 2 version：每个浏览器的最后2个版本

    • last 2 Chrome versions: 最近2个版本的Chorme浏览器
    • last 2 major versions 或 last 2 iOS major versions:最近2个主要版本的所有次要/补丁版本

  • not ie < 8

    1. 可以执行以下的命令
npx browserslist ">1%,last 2 version,not dead"

逗号隔开/or分割的话是并集的关系，换行也是并集的关系；交集的关系可以写and

  1. 应用browserlist

    • 方法一：在package.json

      "browserslist":[
    ">1%",
    "last 2 version",
    "not dead"
]

    • 新建文件 .browserslistrc

      >1%
last 2 version
not dead

4.3 认识postcss工具

  1. 什么是PostCSS?

    • PostCSS是一个通过JavaScript来转换样式的工具；这是一个独立的工具，不仅仅是在webpack中使用
    • 这个工具可以帮助我们进行一些CSS的转换和适配，比如自动添加浏览器前缀，css样式
    • 但是实现这些功能，我们需要借助PostCSS对应的插件

  2. 如何使用PostCSS？

    • 第一步：查找PostCSS在构建工具中的扩展，比如webpack的postcss-loader
    • 第二步：选择可以添加你需要的PostCSS相关的插件

  3. 命令行使用postcss

    • 安装postcss-cli(cli: command line interface命令行接口)

      // 这是工具本身
npm install postcss -D
// 这是为了在命令行可以使用它
npm install postcss-cli -D

    • 验证：

      安装插件，添加浏览器前缀

      npm install autoprefixer -D

      新增test.css

      /* 这个选择器使用需要加上浏览器前缀 */
:fullscreen {
    
}
.content {
    user-select: none;
    transition: all 2s ease;
}

      命令：

      npx postcss --use autoprefixer -o result.css ./src/css/test.css

    4.4 webpack中使用postcss-loader

    1. 安装postcss-loader

      npm install postcss-loader -D

    2. 安装postcss-loader的目的：能在webpack中使用postcss

    3. 使用：在webpack.config.js配置，需要给postcss配置需要用到的插件

      module.exports = {
   module:{
    rules: [
        {
            test: /\.css$/,  // 这里是匹配资源
            use:[
                "style-loader",
                "css-loader",
                "less-loader",
                {
                    loader:"postcss-loader",
                    options:{
                        postcssOptions:{
                            // 依赖的插件放在这个数组里面
                            plugins:[
                                require("autoprefixer")
                            ]
                        }
                    }
                }
            ]
        }
   ]
}

    4. 在浏览器上打开控制台可以看到style标签下的选择器自动加了前缀（根据.browserlisrtc文件中的配置添加）

    4.5 postcss-preset-env插件

    1. 作用：将现代的css样式转换成大部分浏览器可以识别的css样式（如：八位数的color，最后两位是透明度，需要被转换为rgba）

    2. 安装：

      npm install postcss-preset-env -D

    3. 使用：在webpack.config.js配置，给postcss配置需要插件

      postcss-preset-env中包含autoprefixer，可以只引用postcss-preset-env

      可以不用require，直接写插件名字符串，但是不是所有的插件都可以简写，如果插件需要传入参数则一定要require

      module.exports = {
   module:{
    rules: [
        {
            test: /\.css$/,  // 这里是匹配资源
            use:[
                "style-loader",
                "css-loader",
                "less-loader",
                {
                    loader:"postcss-loader",
                    options:{
                        postcssOptions:{
                            // 依赖的插件放在这个数组里面
                            plugins:[
                                "postcss-preset-env"
                            ]
                        }
                    }
                }
            ]
        }
   ]
}

    4. 需要在css文件和less文件中都要使用postcss是否需要两边都配置呢？不需要

      • 在webpack中只写“postcss-loader”

      • 其他的配置在新建文件postcss.config.js中（这个名字是固定的）

        module.exports = {
    plugins:[
        require('postcss-preset-env')
        // 'postcss-preset-env'
    ]
}

5. css-loader的importLoaders属性

5.1 业务场景

component.js中只引用了index.css,在index.css中引用了test.css

@import "./css/test.css"

此时只有index.css的代码被转换，test.css的代码并没有被转换。

5.2 出现原因

原因是webpack的处理逻辑：js中只是引用了index.css，那么postcss-loader工具只会进入到index.css中去处理代码。而对于index.css来说，@import这一行的代码只会用css-loader来进行处理，并不能返回postcss-loader处理，所以test.css内的代码不能转换成浏览器兼容的代码。

但是我们希望的是，@import的文件也可以被处理好。

5.3 处理方法

在css-loader内增加options对象写上importLoaders属性，后面设置的数字的意义是需要被前面多少个loader处理，这里只需要被postcss-loader作处理所以写1；如果写的值是0，那么跟没写是一样的；如果这是less文件还需要被less-loader处理则需要写上2。（太坑啦，loaders的L是要大写的）

module.exports = {
   module:{
    rules: [
        {
            test: /\.css$/,  // 这里是匹配资源
            use:[
                "style-loader",
                {
                    loader:"css-loader",
                    options:{
                        // 这个数字
                        importLoaders:1
                    }
                }
				"postcss-loader",
                }
            ]
        }
   ]
}


这篇关于webpack(二)——css-loader,style-loader,less-loader,postcss-loader的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！


相关编程文章

更多>
本站官方QQ
官方QQ:
23002807

沪ICP备2023033072号-1

     

扫一扫关注最新编程教程