在React中使用样式并启用模块化

React中行内样式的写法：

在jsx中，如果想写行内样式了，不能为 style设置字符串的值 而是应该这么写：

  <div style =  { {color :‘red’，boxShadow:'0 0 10px #ccc',fontSize:'14px' } }></div>

在行内样式中， 如果是数值类型的样式，则可以不用引号包裹，如果是 字符串类型的样式值，必须使用引号包裹.。

React中用类名className的方式书写 :

用类名的方式，不在用class因为是关键字；要使用className
直接导入css样式表，默认是在全局上，整个项目都生效的
疑问：React中，有没有类似于scoped这样的指令呢？
答案： 没有；因为在 React中，根本就没有指令的概念

【【React中如何才能像vue （scoped）那种有自己的样式模块化呢？

1：打开webpack 在css-loader后加上?modules 代表启用模块化

{test:/\.css$/,use:['style-loader','css-loader?modules']}, //打包处理 css样式表的第三方loader

大家可以在css-loader之后，通过？ 追加参数 ， 其中，有个固定的参数，叫做modules，表示为普通的css样式，启用模块化。

2：创建css文件，并导入需要用到样式的文件中
a.css

.title {
    color:red;
    text-align: center;
    font-weight: 200;
}

a.jsx 导入css文件

import classObj from '@/css/Movie.css'   **启用模块化之后就可以导入一个对象， 用这个对象去点我们的类名**
console.log(classObj);  //打印出来的是一个对象 
打印结果：   title: "_1p3ibrao79RsB5kh0by7YB"

3：页面上进行调用类名

 <h1 className = {classObj.title} >这是评论列表组件</h1>

注意：css模块化，只针对 类选择器 和 ID选择器生效，不会将标签选择器模块化

:global（）和 :local ( )

:global(.test){
// 被:global（）包裹起来的类名，不会被模块化，而是会全局生效
font-style : italic
}
被:local()包裹起来的类名和id选择器会被模块化 【不常用】

在项目中启用模块化并同时使用 bootstrap

在React中
我们引用第三方库（比如bootstrap）我们直接用它的类名就会报错，因为我们给css启用了模块化，用类名的话只能通过对象点出来的形式

例如这串代码

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

这种太麻烦了！！！
想直接用 <button className = “btn btn-primary”></button>这种形式
所以，可以自己规定： 第三方样式表，都是以 .css结尾， 这样我们就不用为普通的css启用模块化了
自己的样式表：要以.scss或less结尾，只为，sass和less做模块化。

1: 把自己的css样式表，定义为.scss文件
2： 第三方的(bootstrap)样式表，还是以.css结尾
3： 我们只需要为自己的.scss文件，启用模块化即可。
4： 运行cnpm i sass-loader node-sass - D 安装能够解析scss文件的loader

  module: { // 所有第三方 模块的配置规则
    rules: [ // 第三方匹配规则
      { test: /\.js|jsx$/, use: 'babel-loader', exclude: /node_modules/ }, // 千万别忘记添加 exclude 排除项
      {test:/\.css$/,use:['style-loader','css-loader']}, //打包处理 css样式表的第三方loader
      {test:/\.ttf|woff|woff2|eot|svg$/ , use:'url-loader'},
      **{test:/\.scss$/,use:['style-loader','css-loader?modules&localIndentName=[path][name]-[local]-[hash:5]','sass-loader']}** //打包处理scss文件的loader
    ]
  },

配完之后页面上直接可以用
css不在启用模块化了，bootcss这个对象此时就是个空的{}
所以直接导入我们的bootstrap的css样式