今天在查看css模块化方式的时候,发现了很多可以使css模块化的工具。其中包括css in js 和 css modules 等。个人觉得css modules更加好用一些。其主要的语法如下:
由于目前比较流行的打包工具是webpack,所以针对webpack中的配置方法进行简单介绍;
1.npm install css-loader,style-loader -D
在webpack.config.js中配置
{
test:/\.css$/,
loader: "style-loader!css-loader?modules",
}
2.在使用的时候也比较简单,
@import style from 'xxx';(该处指代地址);引入之后 可以将对应的style中的类名直接赋值给对应的元素,就会产生一个独一无二的class类名,虽然后面调试会有可能 有一些问题,
在style中是这样的
{
.div{
font-size:14px;
}
}
在react中可以这样写:
1).<div className = {style.div}></div>
在vue中可以这样写:
1.)在vue中其实就没必要使用了,因为vue可以在<style scoped>就可以直接进行css模块化了;
3.如此使用的话,就是全部都是模块了,定义全局样式的话,可以使用如下语法
在编写css样式的时候就可以直接进行定义了;
:global(.div){
font-size:14px;
}
这样定义的class类名就是全局样式了。
4.样式继承
如果.div需要继承其他类名样式的话,可以在css样式中这样写:
.div{
font-size:14px;
composes: 这里写所需要继承的类名即可;
}
css模块化还有很多种方式,css-modules只是其中一种,也是想总结一下,所以直接发布成博客了。