07. React-引用bootstrap模块

引用第三方样式表

安装bootstrap模块

cnpm i bootstrap@3.3.7 -S

引用bootstrap模块

//如果引用的包安装到  node_modules目录中
//则可以省略 node_modules 这一层目录，直接以包名开始引入
import bootcss from 'bootstrap/dist/css/bootstrap.css'

配置处理webpack.config.js 字体文件的 loader

{
	test:/\.ttf|woff|woff2|eot|svg$/,
	use:'url-loader'
}

安装 url-loader file-loader -D

cnpm i url-loader -D
cnpm i file-loader -D

引用样式类，属性带 - 不能 . 出来，需要使用 []

<button className={bootcss.btn, bootcss['btn-primary']}>按钮</button>}

使用less或者sass

以上写法由于模块化，使得样式类的引用比较复杂，不应对第三方样式表模块化
可规定

• 自定义样式表用.scss文件或者.less文件，只对其进行模块化
• 第三方样式表均为.css文件，恰好可排除

安装处理sass或less的loader

cnpm i sass-loader node-sass -D

配置

//打包处理css的loader，不在模块化
{
	test: /\.css$/,
	use: ['style-loader','css-loader']
},
//打包处理sass的loader
{
	test: /.scss/,
	use: ['style-loader', 
		'css-loader?modules&localIdentName=[paht]][name]-[local]-[hash]:5', 
		'sass-loader']
}

对样式表只导入即可

import cssObj from '@/css/commentList.scss'	//自定义
import  'bootstrap/dist/css/bootstrap.css'	//第三方

使用

<button className="btn btn-primary">按钮</button>

源代码