如何在Require.js的模块中引入css

html-css038

如何在Require.js的模块中引入css,第1张

1、PHP脚本也是可以引入css样式的，代码实例如下： 其实php属于网站后台爱语言和css是没有任何关系的。

2、建议采用mvc结构，前端页面和后天逻辑分离的模式来开发项目的。

首先，引入公共样式时，我们在“main.js”里使用AMD的方式引入,即

?

1require('./assets/css/main.less')

require(http://r.yuzhua.com)

这时，我们会抛出一个错误，是因为我们没有写解析的依赖，webpack不知道怎么解析

这时，我们要填写上依赖，

?

1require('!style!css!less!./assets/css/main.less')

在很多以前的博客里都是以上写法，这个是Vue 2.0刚开始的，现在使用会报错；下面是正确写法

?

1require('!style-loader!css-loader!less-loader!./assets/css/main.less')

在以前配置到这里，就万事大吉了，也可以开始引入css文件了，然后现在到这里还会报错

当出现以上错误时，说明你的项目里缺少依赖；

?

1npm install style-loader --save

这时你就可以引入css文件了；

网页的布局、颜色、形状等UI展示方式主要是由Css进行设置，在ReactJs中也是一样。ReactJs中的Css结构方式与传统的Web网页类似，但依然存在一些差异。ReactJs中Css文件本身的编写上并没有差异，我们可以定义特定的样式类名，也可以正对Html元素定义样式。差异主要在React对Css的使用上（微信react-javascript）：

l 引用的差异：

传统html文件中css文件引用方式：

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

ReactJs中css文件引用方式：

你可以直接采用require: require('./Category.css')

你也可以采用import: import styles from './Category.css'

l 使用差异：

传统css的使用方式是设置class: <div class=”center”>test </div>

ReactJs中css的使用方式是设置className(因为class已经成为了关键字)。

<div className='entry'>test </div>

另外

如果你采用require的方式，你可以直接在页面元素中使用css文件中的样式名。

如果你采用import styles from './Category.css'的方式，则应采用以下方式。

<div className={style.entry}>test </div>

l 最终解析文件的差异：

传统css文件一般依然保持着源码状态。

在ReactJS中，Css文件最终将会对css样式名进行转换，例如在index.js文件中，引用style.css:

.customButton{

Width:100px

Heigth:30px

}

将转化为：

.index_customButton_23U0x{

Width:100px

Heigth:30px

}.

其中23U0x是随机数，这样转化的结果将避免最终的单页面中，css样式名不存在同名冲突。

基本上ReactJS的css文件的使用差异到此为止了，你可以按照传统Css样式的定义和使用方式，随意使用了，你可以采用单一样式、设置元素标签样式、组合样式、层级样式等任意方式。