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) 编辑 收藏 举报