最全的react视频【黑马程序员】--第九章 引用bootstrap模块

目录

一、引用第三方样式表

二、使用less或者sass

---

一、引用第三方样式表

安装 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

配置处理 webpack.config.js 

            {
                test:/\.css$/,
                use: ['style-loader','css-loader']
            },//打包处理  css样式表  的第三方loader
            {
                test:/\.ttf|woff|woff2|eot|svg$/,
                use:'url-loader'
            },//打包处理 字体文件  的loader
            {
                test: /\.scss$/,
                use: ['style-loader', 'css-loader?modules&localIdentName=[paht]][name]-[local]-[hash]:5', 
                    'sass-loader']
            },//打包处理scss的loader

此时，对样式表只导入即可

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

使用

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

结果：

源代码：链接：https://pan.baidu.com/s/1sz_6ig8MgpndxjfCrWIROw 
提取码：f5v6