在项目中为scss或less文件启用模块化
目录
一、思考第三方样式表达问题，如何做
二、在项目中启用模块化并同时使用bootstrap
1、先安装cnpm i bootstrap@3.3.7-S版本，再使用
2、按钮键的代码设置：
（1）<button class Name={boot css .btn>按钮</hutton>
{this .state .Comment List .map(item => <Cm tItem {...item} key={item.id}></Cm tItem>)}（会有类名）
（2）<button class Name={ [boot css .btn, boot css[ 'btn-primary']].join('')>按钮</button>
{this .state .Comment List. map(item =><Cm tItem {...item} key={item.id}</Cm tItem>)}
执行结果：
3、Bootstrap样式表代码设置：
import css obj from '@/css/cmtlist.css'
console.log(css obj);
//如果在引用某个包的时候，这个包被安装到了 node_ modules目录中
//则可以省略node_ modules这一层目录，直接以包名开始引入自己的模块或样式表当中。
//自己规定： 第三方的 样式表，都是以，css结尾，这样，我们不要为 普通的，css启用模块化
import boot css from 'bootstrap/dist/css/bootstrap .css
4、字体图标文件处理：
//有个固定的参数，叫做 modules ,表示为普通的CSS样式表，启用模块化；
{ test: /.css$/, use:['style-loader','css-loader ?modules& local Ident Name =[path][name]-[local]-[hash:5]']},
/打包处理CSS样式表的第三方
{ test: /\.ttflwofflwoff2leotIsvg$/ , use: 'url-loader' },
/打包处理字体文件
]
5、loader的安装：
cnpm i ur1-loader -D
如果需要生效，需要重新启动服务器。
6、如何解决已经启动的模块化，避免重复
（1）如果在引用某个包的时候，这个包被安装到了 node_ modules目录中,则可以省略node_ modules这一层目录，直接以包名开始引入自己的模块或样式表；
（2）自己规定:第三方的样式表，都是以.css 结尾，这样就不要为普通的.css启用模块化；自己的样式表，都要以.scss或 .less 结尾，只为.scss或.less文件启用模块化。
import bootcss from 'bootstrap/dist/css/bootstrap.css'
console.log(boot css)
（3）改过自己的样式表之后：
import React from 'react'
import css obj from '@/css/cm titem. sess
'console.log(css obj);
export default function Cm tItem(props){
return <div class Name={css obj. cmt box}>
<h1 class Name={css obj. title}评论人: {props .user}</h1>
<p class Name={css obj. content}>评论内容:{props. content}</p>
</div>
1.把自己的样式表，定义为.scss文件
2.第三方的样式表，还是以.css 结尾
3.我们只需要为自己的.scss文件，启用模块化即可;
4.运行cnpm i sass-loader node-sass -o安装能够解析scss文件的loader。
举例：
//其中，有个固定的参数，叫做 modules ,表示为普通的css 样式表，启用模块化
{ test: /.css$/, use: [ 'style-loader ', 'css-loader']}，
//打包处理CSS样式表的第三方loader
{test: /\.ttflwofflwoff2|eotlsvg$/, use: 'url-loader' },
//打包处理字体文件的loader
{ test:/ \.scss$/, use: [ 'style-loader ', 'css-loader ?modules &local Ident Name=[path][name ]-[local]-[hash:5]', 'sass-loader'] }
//打包处理scss文件的loader
执行结果：
{title: "src-css-cmtitem-title-5df8 b"，content:"src-css-cmtitem-content-fc5ee", cmtbow:"src-css-cmtiterm-cmtbox-f2f55""}
{title: "src-css-cmtlist-title-66e92"}
{}
[WDS] Hot Nodule Replacement enabled.
