标签：style 浏览器 less loader webpack postcss css

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%的浏览器，其他的配置工具知道了，就会自动配置

  2. 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

  3. 可以执行以下的命令

npx browserslist ">1%,last 2 version,not dead"

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

4. 应用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",
                }
            ]
        }
   ]
}

标签：style,浏览器,less,loader,webpack,postcss,css
来源： https://www.cnblogs.com/kihyunBlog/p/16188463.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。