CSS教程

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

本文主要是介绍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的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!