Skip to content
久久日记本
曾经年少爱追梦,一心只想往前飞
  • 首页
  • 博客
    • 博客历史
    • 主题
    • 个人文集
  • 关于
    • 正在读的书
    • 作品归档
    • 2018作品归档
    • 联系我
  • 友情链接
  • 留言板
❄
❅
❆
❄
❅
❆
❄
❅
❆
❄
Front-End

React引入样式

Posted on 2016年10月28日 by 九九 / 3667 Views
目录

*1.上节回顾

*2.分离样式

*3.添加loader与打包

*4.简单的引用Bootstrap样式

*5.另一种方式,将Bootstrap打包进代码

1.上节回顾

本篇文档发布在距离上篇大约半年之后,团队更换,所以间歇有些空闲来继续学习React。

在上一章react中简单的数据绑定与事件中,我们直接在jsx代码中的html写上了样式,这并不友好,于是我们必须分离样式成单独的文件了。

demo地址

panel.jsx文件

var React = require("react");

module.exports = React.createClass({
    displayName: 'panel',
    getInitialState:function () {
        return {
            logo: "http://img.99diary.com/blog/src/201603161422/logo.jpg",
            title: "让《疯狂动物城》背后的迪士尼告诉...",
            publishdate:"2016-03-15"
        }
    },
    render: function () {
        return <div style={{"width":"350px","height":"300px","border":"1px solid silver","MozBoxShadow":"2px 2px 13px #333333","WebkitBoxShadow":"2px 2px 13px #333333","BoxShadow":"2px 2px 13px #333333"}}>
                <div style= {{"width":"320px","height":"240px","margin":"auto auto","cursor":"pointer"}} onClick={this.showdetail}>
                    <img src={this.state.logo} width="320" height="240" />
                </div>
                <div style={{"width":"320px","height":"50px","margin":"10px auto auto auto"}}>
                    <div style={{"width":"40px","float":"left"}}>
                        <img src={this.state.logo} width="38" height="38" />
                    </div>

                    <div style={{"width":"280px","float":"left"}}>
                        <div>{this.state.title}</div>
                        <div>
                            {this.state.publishdate}
                        </div>
                    </div>
                </div>
            </div>
    },
    showdetail: function (event) {
        this.setState(
            {
                title: "《疯狂动物城2》即将上映",
                publishdate: "2016-03-16"
            }
        );
    }

});

样式和HTML,js 混杂,难以维护。

2.分离样式

我们新建项目,命名: import css

我们实现如图的简单效果:

blog

分解:

blog

文件夹结构如下:

project--
|
|--components
|       |
|       |--box.jsx
|       |--icon.jsx
|       |--index.jsx
|       |--info.jsx
|
|--css
|   |--box.css
|    
|--index.html
|--package.json
|--webpack.config.js

这种写法类似上一节。

小图标 icon.jsx

'use strict'
var React = require('react');
module.exports = React.createClass({
  displayName: 'Icon',
  render: function () {
    return (
      <div className='icon'>
        <div className='logo'>
        </div>
      </div>
    );
  }
}); 

图标右侧信息 info.jsx

'use strict'
var React = require('react');
module.exports = React.createClass({
  displayName: 'Info',
  render: function () {
    return (
      <div className='info'>
        <div className='title'>Customer Support</div>
        <div className='describe'>Lorem ipsum dolor sit amet, consectetur adip.</div>
      </div>
    );
  }
});

合并两者,取名 box.jsx

'use strict'
var React = require('react');
var Info = require('./info');
var Icon = require('./icon');
module.exports = React.createClass({
  displayName: 'Box',
  render: function () {
    return (
      <div className='box'>
        <Icon></Icon>
        <Info></Info>
      </div>
    );
  }
}); 

合并到 index.jsx

'use strict'
var ReactDOM = require('react-dom');
var Box = require('./box');

ReactDOM.render(
  <div>
    <Box></Box>
  </div>,
  document.getElementById('content')); 

分离出来的样式 box.css

.box{
  width: 320px;
  height: 60px;
  background-color: #52AD81;
  font-family: 'Open Sans',serif;
}
.box .icon{
  width: 60px;
  height: 60px;
  vertical-align: middle;
  float: left;
}
.box .icon .logo{
  width: 40px;
  height: 40px;
  background-color: white;
  margin: 10px auto 10px auto;
  border-radius: 20px;
  background-image: url('../image/0.png');
  /*background-image: url('http://localhost:8889/image/0.png')*/
  background-size: 100%;
  background-repeat: no-repeat;
}
.box .info{
  width: 260px;
  height: 60px;
  float: right;
  color: white;
}
.box .info .title{
  font-weight: 300;
  padding-left: 10px;
}
.box .info .describe{
  padding-left: 10px;
}
3.添加loader与打包

开始我在index.jsx中引入box.css

 require('react')

然而并什么卵用,查看了一些资料,原来是需要css loader,然后打包进去即可。

var webpack = require('webpack');
module.exports = {
  // entry: './components/index.jsx',
  entry: {
    index: ['./components/index.jsx', './css/box.css'] //将css文件打包进去
  },
  output: {
    filename: 'bundle.js',
    publicPath: 'http://localhost:8889/dist/'
  },
  module: {
    loaders: [
      {
        test: /\.jsx$/,
        loader: 'jsx-loader?insertPragma=React.DOM&harmony'
      },
      // 添加css loader
      {
        test: /\.css$/,
        loader: 'style-loader!css-loader'
      },
      // {
      //   test: /\.(png|jpg|gif)$/,
      //   loader: 'url-loader?limit=8192'
      // }, // <=8k的图片使用base64内联, 其他的继续用图片
      {
        test: /\.(png|jpg|gif)$/,
        loader: 'file-loader'
      } // 图片独立(兼容<IE8的browser)

    ]
  },
  externals: {
    react: 'React'
  },
  plugins: [
  ],
  resolve: {
    extensions: ['', '.js', '.jsx']
  }
}

CMD运行 > npm start

已经有上图中效果了。

4.简单的引用Bootstrap样式

直接引入bootstrap样式,我们可以在index.html添加引用,这里调用一个bootstrap的cdn链接:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Hello World</title>
    <meta charset="utf-8" />
    <title>import css</title>
    <script src="./node_modules/react/dist/react-with-addons.js"></script>

    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css"> 
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"> 
    <script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script> 
    <script src="http://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
    <div id="content">

    </div>

    <!--<script src="http://localhost:8889/vendor.js"></script>-->

    <!--注意这里的路径,要和配置文件端口设置一致-->
    <script src="http://localhost:8889/webpack-dev-server.js"></script>
    <script type="text/javascript" src="http://localhost:8889/dist/bundle.js"></script>

</body>
</html>

为了证明引用成功,我们添加一个div来展示bottstrap中panel效果。

在components文件夹中添加 panel.jsx 文件:

'use strict'
var React = require('react');
module.exports = React.createClass({
  displayName: 'Panel',
  render: function () {
    return (
      <div className='row'>
        <div className='col-sm-4'>
          <div className="panel panel-default">
            <div className="panel-heading">
              <h3 className="panel-title">Panel title</h3>
            </div>
            <div className="panel-body">
              Panel content
            </div>
          </div>
        </div>
      </div>
    );
  }
});

在index.jsx中添加对panel的引用。

页面被刷新,bootstarp效果生效。

blog

右侧可以猜测,我们自己分离的box.css也可以使用这种方式引用,这样就不会打包进我们的代码。

当然,这里是学习,我们可以尝试将bootstrap文件简单的打包到我们的代码中。

5.另一种方式,将Bootstrap打包进代码

删除html中关于Bootstrap的引用(注释会在打包时候报错…),将Bootstrap文件保存到本地并放入lib/bootstrap文件夹中,修改webpack.config.js。

注意:bootstrap中引用了一些字体,需要去掉bootstrap.min.css中的字体引用,不然会报错

var webpack = require('webpack');
module.exports = {
  // entry: './components/index.jsx',
  entry: {
    index: [
      './components/index.jsx',
      './lib/bootstrap/bootstrap-theme.min.css',
      './lib/bootstrap/bootstrap.min.css',
      './lib/bootstrap/jquery.js',
      './lib/bootstrap/bootstrap.min.js',
      './css/box.css'
    ] //将css文件打包进去
  },
  output: {
    filename: 'bundle.js',
    publicPath: 'http://localhost:8889/dist/'
  },
  module: {
    loaders: [
      {
        test: /\.jsx$/,
        loader: 'jsx-loader?insertPragma=React.DOM&harmony'
      },
      // 添加css loader
      {
        test: /\.css$/,
        loader: 'style-loader!css-loader'
      },
      // {
      //   test: /\.(png|jpg|gif)$/,
      //   loader: 'url-loader?limit=8192'
      // }, // <=8k的图片使用base64内联, 其他的继续用图片
      {
        test: /\.(png|jpg|gif)$/,
        loader: 'file-loader'
      }// 图片独立(兼容<IE8的browser)
    ]
  },
  externals: {
    'react': 'React'
  },
  plugins: [

  ],
  resolve: {
    extensions: ['', '.js', '.jsx', 'css']
  }
}

CMD运行 > npm start

然而报错

bundle.js:21322 Uncaught Error: Bootstrap's JavaScript requires jQuery(…)

bootstrap库虽然被打包但是依然报错缺少jquery依赖。

尝试将jquery暴露给全局的变量的方法,修改webpack.config.js,

这里采用知乎网友给出的方法:

jQuery 直接在 html 中引入,然后在 webpack 中把它配置为全局即可。

externals: {
  jquery: 'window.$'
},

使用则直接 require 进来,反正 webpack 也不会把它打包进来。

var $ = require('jquery');

既然 $ 已经被设置为全局了,那么挂载在它下面的一系列 jQuery 插件就好办了,直接在 html 中引入。

<script type="text/javascript" src="./src/lib/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="./src/lib/jquery.nail.min.js"></script>

js 中引入 jquery 直接使用即可。

var $ = require('jquery');
$('#leftNav').nail();

然后看我们自己的代码,

修改webpack.config.js

  externals: {
    'react': 'React',
    'jquery': 'window.$'
  },

在index.html中添加对jquery.js的引用:

<script src="lib/bootstrap/jquery.min.js"></script>

这个时候Juqey已经被暴露给全局,再次将bootstrap打包进去必然可以使用。

再次修改webpack.config.js:

  entry: {
    index: [
      './components/index.jsx',
      './lib/bootstrap/bootstrap-theme.min.css',
      './lib/bootstrap/bootstrap.min.css',
      './lib/bootstrap/bootstrap.min.js',
      './css/box.css'
    ] //将css文件打包进去
  },

CMD运行 > npm start,页面已经能够复现 4 所显示的效果。

本节源码地址(importcss)

上两节目录:

  1. 第一次使用webpack来写react
    源码地址(helloworld)

  2. react中简单的数据绑定与事件
    源码地址(panels)

React
九九
过去的我们,现在的自己,往事,终会随风而逝。 View all posts by 九九 →

Post navigation

Older post
再见,三毛
Newer post
React前后端数据绑定

标签云

2019ncov Android ASP.NET C# C/C++ CSS Div DX11 flask front-end GAE Git Java JJProject JS Life MSSQL MVC OpenSource Oracle Python React React-Native Software Tools Vue Webpack Website Window WP7 乱记 十年旧梦 天气 宝宝成长日记 小说 工作 情感 故障 散文 日记 游戏开发 网新实训笔记 花落梧桐 诗间集 转载

时光机

  • 2022年12月
  • 2022年4月
  • 2022年3月
  • 2022年1月
  • 2021年12月
  • 2021年11月
  • 2021年10月
  • 2021年9月
  • 2021年8月
  • 2021年6月
  • 2021年5月
  • 2021年4月
  • 2021年3月
  • 2021年2月
  • 2021年1月
  • 2020年5月
  • 2019年12月
  • 2019年10月
  • 2019年9月
  • 2019年6月
  • 2019年5月
  • 2019年2月
  • 2019年1月
  • 2018年12月
  • 2018年9月
  • 2018年8月
  • 2018年7月
  • 2018年6月
  • 2018年3月
  • 2018年2月
  • 2018年1月
  • 2017年11月
  • 2017年10月
  • 2017年9月
  • 2017年7月
  • 2017年3月
  • 2017年1月
  • 2016年12月
  • 2016年11月
  • 2016年10月
  • 2016年7月
  • 2016年3月
  • 2016年2月
  • 2016年1月
  • 2015年12月
  • 2015年11月
  • 2015年10月
  • 2015年9月
  • 2015年8月
  • 2015年7月
  • 2015年4月
  • 2015年3月
  • 2015年2月
  • 2015年1月
  • 2014年12月
  • 2014年11月
  • 2014年10月
  • 2014年9月
  • 2014年8月
  • 2014年7月
  • 2014年6月
  • 2014年5月
  • 2014年4月
  • 2014年3月
  • 2014年2月
  • 2014年1月
  • 2013年12月
  • 2013年11月
  • 2013年10月
  • 2013年9月
  • 2013年8月
  • 2013年7月
  • 2013年6月
  • 2013年5月
  • 2013年4月
  • 2013年3月
  • 2013年1月
  • 2012年11月
  • 2012年10月
  • 2012年9月
  • 2012年8月
  • 2012年7月
  • 2012年6月
  • 2012年5月
  • 2012年4月
  • 2012年3月
  • 2012年2月
  • 2012年1月
  • 2011年12月
  • 2011年11月
  • 2011年10月
  • 2011年9月
  • 2011年8月
  • 2011年6月
  • 2011年5月
  • 2011年4月
  • 2011年3月
  • 2011年2月
  • 2010年12月
  • 2010年11月
  • 2010年10月
  • 2010年9月
  • 2010年8月
  • 2010年6月
  • 2010年5月
  • 2010年2月
  • 2010年1月
  • 2009年12月
  • 2009年11月
  • 2009年10月
  • 2009年9月
  • 2009年8月
  • 2009年7月
  • 2009年6月
  • 2009年5月
  • 2009年4月
  • 2009年3月
  • 2009年2月
  • 2009年1月
  • 2008年8月
  • 2008年6月
  • 2008年5月
  • 2008年4月
  • 2008年2月
  • 2007年11月
  • 2007年8月
  • 2007年6月
  • 2007年5月
  • 2007年4月
  • 2007年3月
  • 2007年2月
  • 2007年1月
  • 2006年10月
  • 2006年8月
© 2006 - 2023 久久日记本
Powered by WordPress | Theme: Graphy for 99diary