在项目中为scss或less文件启用模块化并同时使用bootstrap

1. 把 自己的样式表，定义为 .scss 文件

2. 第三方的 样式表，还是 以 .css 结尾

3. 我们只需要为自己的 .scss 文件，启用模块化即可；

4. 运行cnpm i sass-loader node-sass -D 安装能够解析scss文件的loader

5. 运行cpm i bootstrap@3.3.7 -S 安装bootstrap

6. 运行cnpm i url-loader -D 安装字体loader

7. 运行cnpm i file-loader -D

8. 添加loader规则：

{ test: /\.scss$/, use: ['style-loader', 'css-loader?modules', 'sass-loader'] } // 打包处理 scss 文件的 loader

webpack.config.js

const path = require('path')
const HtmlWebPackPlugin = require('html-webpack-plugin')

const htmlPlugin = new HtmlWebPackPlugin({
    template:path.join(__dirname,'./src/index.html'),
    filename:'index.html'
})

module.exports = {
    mode : 'development',
    plugins:[
        htmlPlugin
    ],
    module:{
        rules:[
            { test: /\.js|jsx$/, use: 'babel-loader', exclude: /node_modules/ },
            // 大家可以在 css-loader 之后，通过 ? 追加参数，
            // 其中，有个固定的参数，叫做 modules , 表示为 普通的 CSS 样式表，启用模块化
            { 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', 'sass-loader'] } // 打包处理 scss 文件的 loader
        ]
    },

    resolve :{
        extensions :[ '.js' , '.jsx' , '.json' ], //表示这几种文件的后缀名可以省略，按照从前到后的方式来进行补全
        alias: {//表示别名
            '@' : path.join(__dirname,'./src') //这样，@ 就表示 项目根目录中src 的这一层路径
        }
    }

} 

css->cmtitem.scss

.title{
    font-size: 14px;
  }
  
  .content{
    font-size: 12px;
  }
  
  #cmtbox{
    border: 1px dashed #ccc;
    margin: 10px;
    padding: 10px;
    box-shadow: 0 0 10px #ccc;
  }

css->cmtlist.scss

/* 注意: 被 :local() 包裹起来的类名，会被模块化，默认情况下，所有的类名和ID 都被 模块化了 */
.title{
    color: red;
    text-align: center;
    font-weight: 200;
}

/* 注意：被 :global() 包裹起来的类名，不会被模块化，而会是全局生效 */
:global(.test){
    font-style: italic;
}

components->CmtItem.jsx

import React from 'react'

import cssobj from '@/css/cmtitem.scss'
console.log(cssobj);

export default function CmtItem (props){
    return <div id={cssobj.cmtbox}>
    <h1 className={cssobj.title}>评论人:{props.user}</h1>
    <p className={cssobj.comment}>评论内容:{props.content}</p>
    </div>
}

components->CmtList.jsx

import React from 'react'
import CmtItem from "@/components/CmtItem"

//导入 列表组件需要的样式表
//问题 ： 这个样式表，是 只在 List组件中生效吗？
//经过实验，发现，直接导入 css 样式表，默认是全局上，整个项目都生效的

//思考：Vue 组件中的样式表，有没有 冲突的问题？？
// 答案 ： Vue  组件只能够的样式表，也有冲突的问题；但是，可以使用<style scoped></style>
//疑问:React 中，有没有类似于 scoped 这样的指令呢？
// 答案 ：没有，因为 在 React 中，根本就没有指令的概念；
import cssobj from '@/css/cmtlist.scss'
console.log(cssobj);

//如果在引用某个包的时候，这个包被安装到了 node_modules 目录中，
//则，可以省略 node_modules 这一层目录，直接已包名开始引入自己的模块 或 样式表
//自己规定 ： 第三方的 样式表，都以 .css 结尾，这样，我们不要为普通的 .css 启用模块化
//  自己的样式表，都要以 .scss 或者 .less 结尾，只为 .scss 或者 .less文件启用模块化
//import 'bootstrap/dist/css/bootstrap.css'

export default class CmtList extends React.Component{
    constructor(){
      super()
      this.state = {
  
        CommentList:[
          {id:1,user:"张三",content:"哈哈，沙发"},
          {id:2,user:"李四",content:"哈哈，板凳"},
          {id:3,user:"王五",content:"哈哈，凉席"},
          {id:4,user:"赵六",content:"哈哈，砖头"},
          {id:5,user:"田七",content:"哈哈，楼下扇贝"}
        ]
      }
    }
  
    render(){
  
      return <div>
        <h1 className={cssobj.title + ' test'} >这是评论列表组件</h1>
        {/* <button className={bootcss.button}>按钮</button> */}
        {this.state.CommentList.map(item => <CmtItem {...item} key = {item.id}></CmtItem>)}
        
      </div>
  
    }
}