React学习第四步--引入样式

本篇文章主要记录关于React项目的样式设置与css、sass、less等文件的引入方法，可能不完全正确，仅供参考。

脱离React，有点技术的人应该都熟悉如何在我们的html文件里配置样式以及引入样式文件，这里大概说明一下：

1、内联式（行内样式）   直接在标签内部声明样式         

<div style=" font-size:12px; backgroundColor: red ">css样式测试文字</div>

2、嵌入式（内部样式）   在html文件内通过标签名、class或id等方法与标签联系起来设置样式           

<style type="text/css">  
    div { width: 60px; }  
</style>

    
3、外联式  通过引入外部样式文件来设置样式

<link rel="stylesheet" type="text/css" href="css.css" />

但是在前面的学习中我们也有所了解，React项目中的DOM是虚拟的DOM，所以样式的设置和引入方式也有所不一样。下面将一一讲解。

内联式：

在React项目中添加css样式的写法如下：

<div style={{ fontSize='12px', backgroundColor = 'red' }}>css样式测试文字</div>

对比普通html文件中的方式，我们可以发现style=" font-size:12px " 变成了style={{ fontSize='12px' }}
style=后面跟着{{  }}  font-size变为fontSize采用了单驼峰式的命名形式，同理其他的css样式也同样全部采用单驼峰式的命名形式设置，同时'12px'以字符串方式传入，不同的字段用逗号隔开

嵌入式:

在React项目中添加css样式的写法如下：

class Page1 extends React.Component{
    render(){

        let myclass={
            backgroundColor:'red' ,
            fontSize:'12px'
        }

        return(
            <div>
                <div style={myclass}>css样式测试文字</div>
            </div>
        );
    }
}

首先声明一个样式对象，然后在返回DOM中运用这个对象，css的样式就被引用了。
注： 这里只需要一层{}

外联式（css文件、sass文件）：

首先准备一个css文件，写好需要的样式，这里我的文件为myclass.css文件其中定义了一个div样式为

#mydiv{
    background-color:red;
    font-size:12px;
}

在React文件中引用 require('./myclass.css'); 文件引用路径根据自己的项目来定，然后在渲染的DOM中有一个
<div id='mydiv'>css样式测试文字</div>这样css样式也成功使用了。

看了React项目的webpack.config配置，本身也是满足sass文件的编译的，方式基本和css引用一致，详细的用法自行参阅，这里就不做过多的介绍。

下面着重介绍一下引入less文件，最近在用React重构之前项目，发现不能直接引入less文件，感觉很奇葩，查阅了资料解决了
这一问题，这里也和大家分享一下。

要想能够使用less文件，首先我们得把React项目的配置文件暴露出来，执行

npm run eject

此时我们会发现生产了config,script两个文件夹

如果你是在项目开发中去做这步操作的话，可能会遇到报错情况

出现这种情况说明有文件没有提交，或者Git没有配置好，依次执行

git init

git add .

git commit -m 'init'

提交完成之后再次运行npm run eject就能成功了。

接下来需要安装less和less-loader

cnpm install less less-loader --save

 没有安装淘宝镜像使用npm

安装完成之后我们需要修改webpack.config.js文件内容，大致修改地方，按照截图配置好两处地方保存运行在按css引入方式引入less文件就能成功编译了。