css模块化

          今天在查看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只是其中一种，也是想总结一下，所以直接发布成博客了。