webpack之css模块化

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

1.在app.js中引入

 1 import  React    from  'React';
 2 import  ReactDOM from  'react-dom';
 3 
 4 import 'font-awesome/css/font-awesome.css';//引入直接类名调用
 5 import blue from './a.css';//css文件模块话引用
 6 
 7 ReactDOM.render(
 8 <div className="fa fa-snowflake-o" >
 9     <span className={blue.ot} >React </span>
10 </div>,
11     document.getElementById('cdd')
12 );

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.　重新调用

1 cnpm run start

 

posted on 2018-01-24 15:32  running-fly  阅读(2578)  评论(0)  编辑  收藏  举报

导航