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