文档章节

reactJS -- 12 CSS 模块化

奋斗的小芋头
 奋斗的小芋头
发布于 2017/07/04 16:21
字数 416
阅读 9
收藏 0

一.安装依赖包(完成模块化)

如果项目运行时 ,依赖包出现了问题,把node_modules 中的包都删掉,只要有package.json 都可以再重新装。运行命令。

可以引入如下包;

    "babel-plugin-react-html-attrs": "^2.0.0",
    "style-loader": "^0.13.1",
    "css-loader": "^0.25.0"

1.在 package.json 中加入 以上配置

  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.24.1",
    "babel-loader": "^7.0.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "css-loader": "^0.28.1",
    "es2015": "0.0.0",
    "eslint": "^3.19.0",
    "eslint-loader": "^1.7.1",
    "html-webpack-plugin": "^2.28.0",
    "react": "^15.5.4",
    "react-dom": "^15.5.4",
    "react-hot-loader": "^1.3.1",
    "style-loader": "^0.17.0",
    "webpack": "^2.3.2",
    "webpack-dev-server": "^2.4.2",
    "babel-plugin-react-html-attrs": "^2.0.0",
    "style-loader": "^0.13.1",
    "css-loader": "^0.25.0"

2.运行命令

重新检测安装。发现有新的配置,会自动安装

sudo npm install

3.配置讲解

   插件: "babel-plugin-react-html-attrs": "^2.0.0",。

这个可以在代码中 直接使用 class 不用 写为 className

4.在webPack.config.js中配置

这个配置使下面调用 css 不会与其他重合。

oaders: [{
      test: /\.js$/,
      exclude: /node_modules/,
      loader: "babel-loader",
      include: __dirname,
      query: {
        presets: [ "es2015", "react" ]
      },
    },
      //下面是添加的 css 的 loader,也即是 css 模块化的配置方法,大家可以拷贝过去直接使用
    {
      test: /\.css$/,
      loader: 'style-loader!css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]'
    }
    ]

5.创建 footer.css

.miniFooter{
  background-color: #333;
  color: #fff;
  padding-left: 20px;
  padding-top: 3px;
  padding-bottom: 3px;
}

6.在 footer.js中使用

将css引用后,声明为一个参数

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

var footerCss = require("../../css/footer.css");
//export 暴露
export default class ComponentFooter extends React.Component{
  render(){   //解析类的输出
    console.log(footerCss);
    return (
      <footer className={footerCss.miniFooter}>
        <h1>这里是页脚,一般放置版权信息</h1>
      </footer>
    )
  }
}

这样,其他文件中就算类名一样,也不会被调用。

console.log(footerCss); 类名对应被修改,一一对应。使样式与组件完全不冲突。

7. 给所有的文件使用样式

:global(.类名){color:red;}

 

© 著作权归作者所有

奋斗的小芋头
粉丝 1
博文 161
码字总数 129345
作品 0
大连
私信 提问
Facebook 被集体“声讨”,要求更改 ReactJS 许可

Apache 软件基金会上周发布通知,反对使用 Facebook 的 BSD+专利 [ROCKSDB] 许可的流行软件。之后 Facebook 将其开源的 RocksDB 的许可更改为 Apache 2 加 GPL 2 的双重许可,而对于 ReactJ...

达尔文
2017/07/25
4.7K
16
react-router 进阶:认证流程、动画

https://github.com/reactjs/react-router/tree/master/examples https://github.com/reactjs/react-router/issues/1209 https://github.com/reactjs/react-router/blob/master/upgrade-guid......

K68
2016/08/10
0
0
选择 Reac​​tJS 的五大理由

ReactJS是一个开源的JavaScript库,并且由Facebook和Instagram这样的顶尖IT企业以及开发者社区所维护。该框架广泛使用于为web应用程序开发用户界面的时候。这个特殊的框架被发明时带有这样一...

达尔文
2016/09/12
4.1K
32
一看就懂的ReactJs入门教程-精华版

现在最热门的前端框架有AngularJS、React、Bootstrap等。自从接触了ReactJS,ReactJs的虚拟DOM(Virtual DOM)和组件化的开发深深的吸引了我,下面来跟我一起领略ReactJs的风采吧~~ 文章有点...

方宏春
2018/06/20
0
0
【译】解构ReactJS的Flux

用ReactJS时不要使用MVC 我将通过列出一些单向数据流的例子来将ReactJS官方实现的Flux和我写的库Reflux作比较。 Facebook的ReactJS开发小组似乎并不待见MVC框架。将MVC模式和ReactJS结合使用...

leozdgao
2015/06/08
0
0

没有更多内容

加载失败,请刷新页面

加载更多

代理模式

//分静态代理和动态代理,区别:是否再编译时知道被被代理的对象 //思想,被代理类将自己的处理交给代理类,代理类可以添加一些新的功能,之后有代理类和客户端交互 https://www.cnblogs.co...

南桥北木
11分钟前
0
0
Spring系列教程七: Spring 整合mybatis的四种方式

一、使用注解实现整合mybatis 项目目录如下 第一步、导入jar包 <build> <resources> <!-- mapper.xml文件在java目录下 --> <resource> ......

我叫小糖主
16分钟前
4
0
阿里P7架构师:这些技术点没搞懂,我劝你不要跳槽!

阿里P7架构师架构师:这些技术点没搞懂,我劝你不要跳槽! 哪些技术点呢? 废话不多说,技术点全在下面这6张图里面了! 1.怎么看源码? 2.分布式 3.微服务 4.性能优化 5.工程化 粉丝福利:一...

别打我会飞
35分钟前
3
0
易错题

父类必须有一个无参构造,不然会报Implicit super constructor Parent() is undefined. Must explicitly invoke another constructor...

architect刘源源
39分钟前
1
0
使用Json4s 将带有Timestamp的对象转json时 变为所在时区

在有Timestamp属性的对象转json时 最后出来的时间会减小8小时,是因为变成了0时区,需要将隐式转换中添加设置本地时区 import org.json4s.{DefaultFormats, Formats}import org.json4s.jac...

可达鸭Go
41分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部