在项目当中我们会用到很多第三方样式表,比如bootstrap,可以发现大多数第三方样式表都是.css文件。而之前我们为.css文件启用了模块化,这就导致我们在使用第三方样式表的时候非常不方便。我们希望不为第三方样式表启用模块化,只对自己写的样式表启用模块化。解决思路是:自己写的样式表都要以.scss结尾,只为.scss结尾的样式表启用模块化。
安装bootstrap
运行npm i bootstrap -S
,由于bootstrap中有很多字体文件我们识别不了,所以需要装loader:npm i url-loader file-loader -D
。安装完成之后配置一下:
{test: /\.ttf|woff|woff2|eot|svg/, use:"url-loader"}
引入方式:import "bootstrap/dist/css/bootstrap.css"
取消对.css文件的模块化
配置文件改为:
{
test: /\.css$/,
use: [
{loader: "style-loader"},
{loader: "css-loader"}
]
}
为.scss文件启用模块化
首先将自己写的样式表文件后缀名改为.scss,然后安装loader:npm i sass-loader -D
,sass-loader依赖node-sass,直接安装node-sass会失败,因为网络问题(你懂的),所以需要首先配置一下镜像:
set sass_binary_site=https://npm.taobao.org/mirrors/node-sass/
然后再运行npm i node-sass -D
。
配置如下:
{
test: /\.scss$/,
use: [
{loader: "style-loader"},
{
loader: "css-loader",
options: {
modules:{
localIdentName: "[path][name]-[local]-[hash:5]"
}
}
},
{loader: "sass-loader"}
]
}
效果
给出Hello.jsx组件中的代码:
import React from "react"
import cssobj from "@/css/styles.scss"
import "bootstrap/dist/css/bootstrap.css"
function Hello(props){
return <div>
<p className={cssobj.title}>Hello,{props.name}</p>
<button className="btn-primary">按钮</button>
</div>;
}
export default Hello;
可以看到,用模块化的方式使用自己写的样式表,按正常的方式使用外部样式表。运行结果如下:
可以看到来自自定义的样式和外部样式都起作用了,成功😊