终于要使用css modules

Peipei Wong 4月 19, 2020

项目的庞大以及glamor的年久失修，不得不使用css modules了。我非常不喜欢css in js，它只会让css失去原有的魅力，仅仅是为了解决命名冲突的问题，搞得css书写特别困难，为了实现类似keyframe，而不得不做各种各样的api来规避它。用了它之后把整体的样式书写的乱七八糟，无尽的嵌套简直是噩梦。虽然不是UI工程师，但是也期待用最少的css代码来实现最好的样式。

css module的出现，简直是一道把人拉到正道上的曙光。具体的配置参见create-react-app的react-script

说一说的我的使用感受（我是使用的less预处理）：

.container {
    .title {
        // ....
    }
}

如果这样写，styles中会有两个属性container和title，其实刚开始特别不了解，但是仔细想了想，现在都是用bem来命名，用bem正常的写法

.xxx {
    &-container {
        // ...
    }

    &-title {
        // ....
    }
}

上面的写法能用的class应该是两个：xxx-container和xxx-title，所以这样暴露没什么问题。那如果你不想将上上面的title暴露出来怎么办，那这个时候你要用到global了

.container {
    :global {
        .title {
            // ....
        }
    }

    &:global {
        &:hover .title {
            // ...
        }
    }
}

关于gloabl的用法，没找到太详细的资料。global指的是全局作用域，其实我理解的是：当前环境的全局作用域，即title用global包起来之后，title样式的生效还是依赖于container作用范围的。:global和&:global的区别不知，你如果将它们交换一下，那么css-loader一定会报错。

还有一个问题是css module中引用图片一定要以~开头。项目中自定义的alias也是以这个符号开头，但是~~static/image/xxx会导致图片找不到，无奈只能将~static改为@staic

参考资料