webpack打包(六)--css模块化

接上一篇webpack打包(五)--使用loader处理图片

app.js中把引入的图片去掉

import React from "react";
import ReactDOM from "react-dom";

import "./common/style/main.css"   

ReactDOM.render(
    <div>React</div>,
    document.getElementById("root")
);


css的模块化

仍然是使用css-loader,对css-loader进行配置,不再使用默认配置,在webpack.config中修改

{
    test: /\.(css)$/,
    use: [
           "style-loader", 
           {
             loader:"css-loader",
             options:{
                  module:true
              }
           }
          ]
 }

css-loader中的module设置为true,开启模块化,默认是false

main.css加样式

.bg_red {
    background: red;
}
.font_18 {
    font-size: 18px;
}
.abc {
    font-size: 40px;
 }

模块化后样式的引用和使用方式要改变

修改后的app.js

import React from "react";
import ReactDOM from "react-dom";

import style from "./common/style/main.css"

ReactDOM.render(
    <div className={style.bg_red}>React</div>,
    document.getElementById("root")
);

main.css引用后赋值给一个变量,class的使用变成style.bg_red

模块化的优点

style文件夹下面新建other.css文件

.abc {
    font-size: 30px;
 }

同样的,other.cssmain.css一样有一个.abc

引入import other from "./common/style/other.css"

要是要使用main.css里面的abcmain.abc,使用other.css里面的abcother.abc

模块化后的样式,相当于有了一个命名空间,解决了不同样式文件class冲突问题

一个问题

模块化后class名字非常不友好,运行项目后发现class的名字已经被loader进行了编译

审查元素并不知道自己所使用的class原来是什么

class语义化

css-loader提供了一个参数localIdentName来控制编译后class的命名,有三个参数path,name,local

path:返回当前样式所在的目录
name:返回当前样式文件的名字
local:返回当前引用的class名字

根据自己的需求进行语义化,修改webapck.configcss-loader配置

 use: [
       "style-loader",
       {
          loader: "css-loader",
          options: {
                    module: true,
                    localIdentName: "[local]-[hash:base64:6]"
                }
        }
       ]

参数要用一对[]包住

这里的[hash:base64:6]代表生成一串以base64编码的hash值,长度为6

最后的结果

标签: 打包, 模块化

添加新评论