《六》Webpack 中处理 CSS 模块的 Loader

在加载 CSS 模块时，webpack 并不知道如何对其进行加载，必须指定对应的 Loader 来完成这个功能。

css-loader：

1. 新建 src/js.component.js 和 src/css/component.css 文件并编写代码。

   // src/js.component.js
   import '../css/component.css'
   
   function component() {
       const element = document.createElement('div')
       element.innerHTML = ['Hello', 'World'].join(' ')
       element.className = 'content'
       return element
   }
   
   document.body.appendChild(component())
   

   // src/css/component.css
   .content {
       color: red;
   }
   

2. 新建 src/index.js 并引入 src/js/componenet.js 文件。

   import './js/component.js'
   

3. 新建 index.html 文件并引入 Webpack 打包后的 JS 文件。

   <script src="./dist/main.js"></script>
   

4. 运行 webpack 命令进行打包，会发现报错了。
   

使用css-loader：

css-loader：用来对 CSS 文件进行加载和解析。

css-loader 负责对 CSS 文件进行解析，但是并不会将解析之后的 CSS 插入到页面中。如果想要将解析之后的 CSS 插入到页面中，需要使用 style-loader。

1. 安裝 css-loader：使用 npm install css-loader --save-dev 来安装。
2. 在 webpack.config.js 配置文件中配置 css-loader。

   // webpack.config.js
   module.exports = {
       module: {
           rules: [
               {
                   test: /\.css$/,
                   use: [ "css-loader"],
               }
           ]
       }
   }
   

安装并使用 css-loader 后，再去运行 webpack 命令进行打包，会发现报错信息不见了。但是样式并没有在页面中生效。

style-loader：

使用style-loader：

style-loader：用来将解析之后的 CSS 文件插入到页面中。

style-loader 的原理：其实就是在源代码的 JS 中增加了 document.createElement('style')，创建了一个 style 标签，将 CSS 文件的样式放到了这个标签中，然后通过页内样式的方式将样式插入到了页面中。

1. 安裝 style-loader：使用 npm install style-loader --save-dev 来安装。
2. 在 webpack.config.js 配置文件中配置 style-loader。

   // webpack.config.js
   module.exports = {
       module: {
           rules: [
               {
                   test: /\.css$/,
                   use: ["style-loader", "css-loader"],
               }
           ]
       }
   }
   

安装并使用 css-loader 和 style-loader 后，再去运行 webpack 命令进行打包，会发现报错信息不见了，样式在页面中也生效了。

postcss-loader：

修改 src/css/component.css 中的代码，再去运行 webpack 命令进行打包，会发现，CSS 代码原封不动地被输出了，但是十六进制八位的颜色值并不是所有浏览器都支持。

// src/css/component.css
.content {
  color: red;
  background: #12345678;
}

使用 postcss-loader：

postcss-loader：在 Webapck 中使用 postcss-loader ，postcss-loader 会利用 PostCss 工具来对 CSS 样式进行转换和适配。

1. 安装 postcss-loader：npm install postcss-loader --save-dev。
2. PostCSS 工具本身其实实现不了什么功能，需要借助 PostCSS 中对应的插件。以 postcss-preset-env 为例，安装 postcss-preset-env 插件：npm install postcss-preset-env --save-dev。
3. 配置 postcss-loader 和 postcss-preset-env：
   • 在 webpack.config.js 配置文件中进行配置所有信息。

     // webpack.config.js
     module.exports = {
       module: {
           rules: [
               {
                   test: /\.css$/,
                   use: [
                     "style-loader",
                     "css-loader",
                     {
                       loader: "postcss-loader",
                       options: {
                         postcssOptions: {
                           // PostCSS 工具本身其实实现不了什么功能，需要借助 PostCSS 中对应的插件
                           plugins: [
                             require('postcss-preset-env'),
                             // 也可以直接这么写，postcss-loader 直接会直接根据字符串去引入对应的插件。但是并不是所有插件都支持
                         	// 'postcss-preset-env',
                           ]
                         }
                       }
                     }
                   ],
               }
           ]
       }
     }
     

   • 在 webpack.config.js 配置文件中进行配置 postcss-loader，在项目根目录下创建 postcss.config.js 配置文件中配置 postcss-loader 相关的信息。postcss-loader 会自动去项目根目录下查找 postcss.config.js 配置文件读取配置信息。

     // webpack.config.js
     module.exports = {
       module: {
           rules: [
               {
                   test: /\.css$/,
                   use: ["style-loader","css-loader","postcss-loader"],
               }
           ]
       }
     }
     

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

此时，再去运行 webpack 命令进行打包，会发现，原本十六进制八位的颜色值被转换为了 rgba 的形式。

问题：

新建 src/css/utils.css 文件编写代码，并在 src/css/component.css 中引入。此时再去运行 webpack，会发现 src/css/utils.css 中的代码被 css-loader 和 style-loader 处理了，但是并没有被 postcss-loader 处理。

// src/css/utils.css
.content {
  user-select: all;
}

// src/css/component.css
@import './utils.css';

这是因为 postcss-loader 在对 src/css/conponent.css 文件中的 CSS 样式进行转换的时候，并不能根据 @import './utils.css'; 这句 CSS 语句引入 CSS 文件，所以导致 postcss-loader 并没有对 src/css/utils.css 文件进行处理；而 css-loader 和 style-loader 是能正确处理 @import './utils.css'; 这句 CSS 语句的，因此 css-loader 和 style-loader 能正确处理 src/css/utils.css 文件。

解决方法：

在 webpack.config.js 配置文件中对 css-loader 进行额外的配置。

module.exports = {
  module: {
      rules: [
          {
              test: /\.css$/,
              use: [
                "style-loader",
                {
                  loader: "css-loader",
                  options: {
                  	// importLoaders 是 css-loader 的一个配置选项。用于指定在处理 CSS 文件中的 @import 导入语句时是否要应用其他的 loaders。属性值是数值，为 1 则表示要使用  css-loader 后面的一个 loader
                    importLoaders: 1,
                  }
                },
                "postcss-loader",
              ],
          }
      ]
  }
}

此时，再去运行 webpack 命令进行打包，会发现 src/css/utils.css 中的代码也被 postcss-loader 处理了。

less-loader：

新建 src/css/component.less 文件编写 less 代码，并在 src/js.component.js 中将其引入，然后运行 webpack 命令进行打包，会发现报错了。

// src/css/component.less
@fontSize: 24px;
@fontWeight: 700;
	
.content {
	font-size: @fontSize;
	font-weight: @fontWeight;
}

// src/js.component.js
import '../css/component.less'

使用 less-loader：

less-loader：将 less 模块转换成 css 模块。

1. 安裝 less-loader：使用 npm install less-loader --save-dev 来安装。

   less 文件是通过 less 工具来将其转换成 css 文件的。
   less-loader 也是借助了 less 工具来完成这个功能的，会自动加载 less 的安装包并对其进行使用。因此，如果项目中没有安装 less 工具，也需要运行 npm install less --save-dev 命令来安装 less。

2. 在 webpack.config.js 配置文件中配置 less-loader。

   // webpack.config.js
   module.exports = {
       module: {
           rules: [
               {
                   test: /\.less$/,
                   // 使用 less-loader 将 less 转成成 css 后，仍然需要使用处理 css 方式来对其进行处理
                   use: ["style-loader", "css-loader", "less-loader"],
               }
           ]
       }
   }
   

此时，再去运行 webpack 命令进行打包，会发现报错信息不见了，less 样式也在页面中生效了。