webpack之css模块化

全局都是用的css文件不进行模块化，只在单个文件使用的css文件模块化处理

1.在app.js中引入

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

import 'font-awesome/css/font-awesome.css';//引入直接类名调用
import blue from './a.css';//css文件模块话引用

ReactDOM.render(
<div className="fa fa-snowflake-o" >
    <span className={blue.ot} >React </span>
</div>,
    document.getElementById('cdd')
);

2.在webpack.config.js文件的rules配置相应的包含，不包含规则

            {
                    test:/\.css$/,
　　　　　　　　　　　　//对目录里面非node_modules，src/common目录下面的css文件开启模块化，页面里引用时候以模块方式引用
                    use:['style-loader',
                            {
                                loader: 'css-loader',
                                options: {
                                    module: true //开启css模块化
                                },
                            }
                    ],
                    exclude:[//排除这两个文件夹下面的css文件
                                path.resolve(__dirname,'node_modules'),
                                path.resolve(__dirname,'src/common')
                    ]
                },
　　　　　　　　　　//对node_modules,src/common目录下面的css文件以全局方式引用，应用到页面
                {
                    test:/\.css$/,
                    use:['style-loader','css-loader'],
                    include:[//样式只应用到这两个文件夹下面的css文件中
                        path.resolve(__dirname,'node_modules'),
                        path.resolve(__dirname,'src/common')
                    ]

                },

　3.　重新调用

cnpm run start